提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

【鸿蒙 HarmonyOS】UI 组件 ( Text 组件 )

组件鸿蒙UI Text HarmonyOS
2023-06-13 09:17:48 时间

文章目录

一、Text 组件

Text 组件是在 UI 界面中显示文本的组件 ;

1. 布局文件中设置 Text :

Text 组件在布局文件中的示例 :

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#000000"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Hello World"
        ohos:text_size="100"
        ohos:text_color="#00FF00"/>

</DirectionalLayout>

id 属性 : ohos:id="$+id:text_helloworld" , 用于作为当前组件的唯一标识 , 在单个布局文件中不允许 id 标识重复 ;

宽度与高度属性 : 可以设置 match_content 和 match_parent 两个值 ;

  • 宽度 : ohos:width=“match_content”
  • 高度 : ohos:height=“match_content”

组件位置属性 : ohos:layout_alignment=“horizontal_center” , 上述配置标识组件水平居中 ;

背景设置属性 : ohos:background_element="$graphic:background_ability_main" , 可以设置一个颜色值 ;

文本设置 : ohos:text=“Hello World” , 设置组件显示的文本为 Hello World ;

文本文字大小设置 : ohos:text_size=“50”

文本颜色设置 : ohos:text_color="#FF0000" , 红色 ;

2. 代码中设置 Text :

        // 获取布局中的组件
        Text text = (Text) findComponentById(ResourceTable.Id_text_helloworld2);
        // 使用代码设置文本
        text.setText("Hello In Java");
        // 使用代码设置文字大小
        text.setTextSize(150);
        // 使用代码设置文字颜色
        text.setTextColor(Color.RED);

获取组件 : 调用 findComponentById ( ) 方法获取 ;

设置文本 : 调用 Text 对象的 setText ( ) 方法设置文本 ;

设置文字大小 : 调用 Text 对象的 setTextSize ( ) 方法设置文字大小 ;

设置文字颜色 : 调用 Text 对象的 setTextColor ( ) 方法设置文字颜色 ;

二、Module 准备

继续使用上一篇博客 【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 ) 的项目进行演示 ;

在欢迎界面选择左侧 Version Control 中的 Git 选项 , 登录 GitHub 账号 , 将项目拉取到本地 ;

从 GitHub 上 Clone 代码 :

参考之前的 【鸿蒙 HarmonyOS】界面跳转 ( Page Ability 的 action 标识 | Page Ability 之间的界面跳转及传递数据 | 鸿蒙工程下创建 Module | 代码示例 ) 博客 , 创建 Module ;

三、代码示例

布局文件示例 :

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text_helloworld1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#000000"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Hello World"
        ohos:text_size="100"
        ohos:text_color="#00FF00"/>

    <Text
        ohos:id="$+id:text_helloworld2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#00FF00"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Hello World"
        ohos:text_size="100"
        ohos:text_color="#00FF00"/>


</DirectionalLayout>

Java 代码示例 :

package com.example.text.slice;

import com.example.text.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取布局中的组件
        Text text = (Text) findComponentById(ResourceTable.Id_text_helloworld2);
        // 使用代码设置文本
        text.setText("Hello In Java");
        // 使用代码设置文字大小
        text.setTextSize(150);
        // 使用代码设置文字颜色
        text.setTextColor(Color.RED);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

执行结果 :

四、GitHub 地址

GitHub 地址 : https://github.com/han1202012/HarmonyHelloWorld

相关文章