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

46次阅读

共计 8536 个字符，预计需要花费 22 分钟才能阅读完成。

作者：韩茹

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

鸿蒙巴士专栏作家

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

正文完
harmonyos
发表至： harmonyos
2021-06-30
 0
关于harmonyos:一文带你看懂HarmonyOS应用上架
关于harmonyos:智胜未来薪-时代IT技术人风口攻略
关于harmonyos:46HarmonyOS鸿蒙开发组件PageSlider和PageSliderIndicator
关于harmonyos:合作伙伴眼中的鸿蒙专访海雀科技研发总监李尹