乐趣区

关于harmonyos:31HarmonyOS鸿蒙开发组件Text

jiezi

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

Text 是用来显示字符串的组件，在界面上显示为一块文本区域。Text 作为一个根本组件，有很多扩大，常见的有按钮组件 Button，文本编辑组件 TextField。

一、反对的 XML 属性

Text 的共有 XML 属性继承自：Component

属性名称 中文形容 取值 取值阐明 应用案例
id 控件 identity，用以辨认不同控件对象，每个控件惟一 integer 类型 仅可用于配置控件的 id。 ohos:id=”$+id:component_id”
theme 款式 援用 仅可援用 pattern 资源。 ohos:theme=”$pattern:button_pattern”
width 宽度，必填项 float 类型，match_parent，match_content ohos:width=”20″
ohos:width=”10vp”
ohos:width=”$float:size_value”
height 高度，必填项 float 类型，match_parent，match_content ohos:height=”20″
ohos:height=”20vp”
ohos:height=”$float:size_value”
min_width 最小宽度 float 类型 ohos:min_width=”20″
ohos:min_width=”20vp”
ohos:min_width=”$float:size_value”
min_height 最小高度 float 类型 ohos:min_height=”20″
ohos:min_height=”20vp”
ohos:min_height=”$float:size_value”
alpha 透明度 float 类型 取值范畴在 0~1。 ohos:alpha=”0.86″
ohos:alpha=”$float:value”
enabled 是否启用 boolean 类型 ohos:enabled=”true”
ohos:enabled=”$boolean:true”
visibility 可见性 visible，invisible，hide ohos:visibility=”visible”
padding 内间距 float 类型
margin 外边距 float 类型

Text 的自有 XML 属性，以下列举了一些罕用的，其余更多的属性，详见官网文档：

属性名称 中文形容 取值 取值阐明 应用案例
text 显示文本 string 类型 能够间接设置文本字串，也能够援用 string 资源。 ohos:text=” 熄屏工夫 ”
ohos:text=”$string:test_str”
hint 提醒文本 string 类型 能够间接设置文本字串，也能够援用 string 资源。 ohos:hint=” 联系人 ”
ohos:hint=”$string:test_str”
text_font 字体 sans-serif，sans-serif-medium 等 能够设置的字体如表中所列。 ohos:text_font=”HwChinese-medium”
truncation_mode 长文本截断形式 none，ellipsis_at_start，ellipsis_at_middle，ellipsis_at_end，auto_scrolling ohos:truncation_mode=”none”
text_size 文本大小 float 类型 示意字体大小的 float 类型。能够是浮点数值，其默认单位为 px；也能够是带 px/vp/fp 单位的浮点数值；也能够援用 float 资源。 ohos:text_size=”30″
ohos:text_size=”16fp”
ohos:text_size=”$float:size_value”

二、创立 Text

在 layout 目录下的 xml 文件中创立 Text。

<Text
      ohos:id="$+id:text1"
      ohos:height="match_content"
      ohos:width="match_content"
      ohos:layout_alignment="horizontal_center"
      ohos:text="我的第一个文本"
      />

ohos:height=”match_content”，文本高度
ohos:width=”match_content”，文本宽度

三、设置 Text

  • 在 xml 中设置 Text 的背景。

    layout 目录下 xml 文件的代码示例如下：

    <Text
    ...
    ohos:background_element="$graphic:background_text"/>

罕用的背景如常见的文本背景、按钮背景，能够采纳 XML 格局搁置在 graphic 目录下。

在“Project”窗口，关上“entry > src > main > resources > base”，右键点击“graphic”文件夹，抉择“New > File”，命名为“background_text.xml”，在 background_text.xml 中定义文本的背景。

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="30"/>
    <solid
        ohos:color="#C0C0C0"/>
</shape>

ohos:radius=”30″，圆角

图 1 应用 xml 设置 Text 背景的成果

  • 设置字体大小和色彩

    下面的成果，文字好小一扣扣，咱们来设置一下字体大小和色彩：

    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="程序咖"
      
        ohos:text_color="#FF0000"
        ohos:text_size="28fp"
      
          ohos:background_element="$graphic:background_text"
        />

图 2 设置字体大小和色彩的成果

ohos:text_color=”#FF0000″，文本色彩
ohos:text_size=”28fp”，字体大小

  • 设置边距成果

    还有有点丑，咱们加一些边距 

    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="程序咖"

        ohos:text_color="#FF0000"
        ohos:text_size="28fp"

        ohos:left_margin="15vp"
        ohos:top_margin="30vp"

        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"

        ohos:background_element="$graphic:background_text"
        />

设置了外边距和内边距的成果

ohos:left_margin=”15vp”，左外边距
ohos:top_margin=”30vp”，上外边距
ohos:right_margin=，右外边距
ohos:bottom_margin=，下外边距

ohos:right_padding=”15vp”，右内边距
ohos:left_padding=”15vp”，左内边距
ohos:top_padding=”8vp”，上内边距
ohos:bottom_padding=”8vp”，下内边距

  • 设置字体格调和字重 

    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="ChengXuKa"

        ohos:text_color="#FF0000"
        ohos:text_size="28fp"

        ohos:left_margin="15vp"
        ohos:top_margin="30vp"

        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"

        ohos:italic="true"
        ohos:text_weight="700"
        ohos:text_font="serif"

        ohos:background_element="$graphic:background_text"
        />

图 3 设置字体格调和字重的成果

ohos:italic=”true”，歪斜

ohos:text_weight=”700″，字重

ohos:text_font=”serif” 字体

  • 设置文本对齐形式 

    <Text
        ohos:id="$+id:text1"
        ohos:height="100vp"
        ohos:width="300vp"
        ohos:text="ChengXuKa"

        ohos:text_color="#FF0000"
        ohos:text_size="28fp"

        ohos:left_margin="15vp"
        ohos:top_margin="30vp"

        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"

        ohos:italic="true"
        ohos:text_weight="700"
        ohos:text_font="serif"

        ohos:text_alignment="horizontal_center|bottom"

        ohos:background_element="$graphic:background_text"
        />

图 4 设置文本对齐形式的成果

ohos:text_alignment=”horizontal_center|bottom”，文本对齐形式，能够设置取值项如表中所列，也能够应用“|”进行多项组合。

left，示意文本靠左对齐。

top，示意文本靠顶部对齐。

right，示意文本靠右对齐。

bottom，示意文本靠底部对齐。

horizontal_center，示意文本程度居中对齐。

vertical_center，示意文本垂直居中对齐。

center，示意文本居中对齐。

start，示意文本靠起始端对齐。

end，示意文本靠结尾端对齐。

  • 设置文本换行和最大显示行数 

    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="100vp"
        ohos:text="ChengXuKa"

        ohos:text_color="#FF0000"
        ohos:text_size="28fp"

        ohos:left_margin="15vp"
        ohos:top_margin="30vp"

        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"

        ohos:italic="true"
        ohos:text_weight="700"
        ohos:text_font="serif"

        ohos:multiple_lines="true"
        ohos:max_text_lines="3"

        ohos:background_element="$graphic:background_text"
        />

图 5 设置文本换行和最大显示行数的成果

ohos:multiple_lines=”true”，多行模式设置，能够间接设置 true/false，也能够援用 boolean 资源。
ohos:max_text_lines=”3″

四、主动调节字体大小

Text 对象反对依据文本长度主动调整文本的字体大小和换行。

  1. 设置主动换行、最大显示行数和主动调节字体大小。

     <Text
        ohos:id="$+id:text2"
        ohos:width="90vp"
        ohos:height="match_content"
        ohos:min_height="30vp"
        ohos:text="T"
        ohos:text_color="#0000FF"
        ohos:top_margin="20vp"
        ohos:left_margin="20vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"

        ohos:italic="true"
        ohos:text_weight="700"
        ohos:text_font="serif"

        ohos:auto_font_size="true"
        ohos:multiple_lines="true"
        ohos:max_text_lines="1"
        ohos:background_element="$graphic:background_text"/>

  2. 通过 setAutoFontSizeRule 设置主动调整规定，三个入参别离是最小的字体大小、最大的字体大小、每次调整文本字体大小的步长。

                    Text text2 =(Text) findComponentById(ResourceTable.Id_text2);
        // 设置主动调整规定
        text2.setAutoFontSizeRule(30, 100, 1);
        // 设置点击一次增多一个 "T"
        text2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {text2.setText(text2.getText() + "T");
            }
        });

图 6 主动调节字体大小

五、跑马灯成果

当文本过长时，能够设置跑马灯成果，实现文本滚动显示。前提是文本换行敞开且最大显示行数为 1，默认状况下即可满足前提要求。

<Text
        ohos:id="$+id:text3"
        ohos:width="200vp"
        ohos:height="match_content"
        ohos:text="王二狗约李小花看电影，李小花不去，王二狗就和王三狗去了，看的博人转"
        ohos:text_size="28fp"
        ohos:top_margin="20vp"
        ohos:left_margin="20vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        ohos:text_color="#0000FF"
        ohos:italic="true"
        ohos:text_weight="700"
        ohos:text_font="serif"

        ohos:background_element="$graphic:background_text"/>

Java 代码：

                 Text text3 =(Text) findComponentById(ResourceTable.Id_text3);
        // 跑马灯成果
        text3.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
        // 始终处于主动滚动状态，批示文本的主动滚动计数，该计数必须大于或等于 1，或永远滚动
        text3.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
        // 启动跑马灯成果
        text3.startAutoScrolling();

图 7 跑马灯成果

六、写个例子

利用文本组件实现一个标题栏和具体内容的界面。

图 8 界面成果

<img src=”https://img.chengxuka.com/WX20210601-173211@2x.png/mark” alt=”WX20210601-173211@2x” style=”zoom:50%;” />

源码示例：

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:color_light_gray_element">
    <Text
        ohos:id="$+id:text1"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text_size="25fp"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"

        ohos:top_padding="10vp"
        ohos:bottom_padding="10vp"

        ohos:background_element="$graphic:background_text"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"/>
    <Text
        ohos:id="$+id:text2"
        ohos:width="match_parent"
        ohos:height="640vp"
        ohos:text_size="25fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Content"
        ohos:top_margin="15vp"
        ohos:left_margin="15vp"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:text_alignment="center"
        ohos:below="$id:text1"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button1"
        ohos:width="100vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:below="$id:text2"
        ohos:left_of="$id:button2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="100vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:background_text"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:padding="5vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text2"
        ohos:text_font="serif"/>
</DependentLayout>

color_light_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid
        ohos:color="#EDEDED"/>
</shape>

background_text.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="30"/>
    <solid
        ohos:color="#C0C0C0"/>
</shape>

更多内容：

1、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com

退出移动版