HarmonyOS（鸿蒙）——Text（文本）组件介绍

╰+攻爆jí腚メ 2022-09-07 03:46 546阅读 0赞

本文已收录于专栏

[❤️《鸿蒙开发》❤️][Link 1]

持续更新HarmonyOS（鸿蒙系统）学习系列文章，系统入门学习鸿蒙！

--------------------

## 一、简介 ##

Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。  
**Text组件继承自Componet。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTI1MjE5_size_16_color_FFFFFF_t_70]

**华为官方学习地址：**  
[https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-text-0000001050729534][https_developer.harmonyos.com_cn_docs_documentation_doc-guides_ui-java-component-text-0000001050729534]

## 二、属性 ##

Text组件支持的属性比较多，但是由于其非常重要，因此每个属性我会根据官网文档一一实现。

### 2.1 text ###

<table> 
 <thead> 
  <tr> 
   <th><strong>属性名称</strong></th> 
   <th><strong>中文描述</strong></th> 
   <th><strong>取值</strong></th> 
   <th><strong>取值说明</strong></th> 
   <th><strong>使用案例</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>显示文本</td> 
   <td>string类型</td> 
   <td>可以直接设置文本字串，也可以引用string资源（推荐使用）。</td> 
   <td>ohos:text=“熄屏时间”</td> 
  </tr> 
  <tr> 
   <td>ohos:text="$string:test_str"</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**代码演示：**

**显示效果：**  
![在这里插入图片描述][5cebd871608944388cf330587ea0ccd9.png]

### 2.2 text\_size ###

**代码演示：**

**显示效果：**  
![在这里插入图片描述][efed5e77e33b40ff8ba08bda75c4d4d4.png]  
![在这里插入图片描述][70df698b74dd49a8a3fcd75c925d004c.png]

### 2.3 text\_color ###

**代码演示：**

**演示效果：**  
![在这里插入图片描述][b9ae6e438b07475187ae487052027e72.png]

**使用HEX效果：**  
![在这里插入图片描述][498798ca17ab41968a53e5fbadb09f56.png]

### 2.4 text\_font ###

**代码演示：**

**演示效果：**  
![在这里插入图片描述][fb272eff64d54d41b880106532f94845.png]

### 2.5 italic ###

**代码演示：**

**演示效果：**  
![在这里插入图片描述][9526db41166b435f9ba66f9c59ef267c.png]

### 2.6 text\_weight ###

**代码演示：**

**演示效果：**  
text\_weight = 100  
![在这里插入图片描述][7528881f782a4f45bc2354206c2e205e.png]

text\_weight = 600  
![在这里插入图片描述][37983b4a71af4b6a9ab3d9c9871c082b.png]

### 2.7 background\_element ###

常用的背景如常见的文本背景、按钮背景，可以采用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="20px"/>
        
        <solid ohos:color="#878787"/>
    
    </shape>

**演示效果：**  
![在这里插入图片描述][7315779ed7cd43e3aa8e23025b9e63ad.png]

### 2.8 text\_alignment ###

<table> 
 <thead> 
  <tr> 
   <th><strong>属性名称</strong></th> 
   <th><strong>中文描述</strong></th> 
   <th><strong>取值</strong></th> 
   <th><strong>取值说明</strong></th> 
   <th><strong>使用案例</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text_alignment</td> 
   <td>文本对齐方式</td> 
   <td>left</td> 
   <td>表示文本靠左对齐。</td> 
   <td>可以设置取值项如表中所列，也可以使用“</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>top</td> 
   <td>表示文本靠顶部对齐。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>right</td> 
   <td>表示文本靠右对齐。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>bottom</td> 
   <td>表示文本靠底部对齐。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>horizontal_center</td> 
   <td>表示文本水平居中对齐。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>vertical_center</td> 
   <td>表示文本垂直居中对齐。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>center</td> 
   <td>表示文本居中对齐。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>start</td> 
   <td>表示文本靠起始端对齐。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>end</td> 
   <td>表示文本靠结尾端对齐。</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**代码演示：**

<Text
          ohos:id="$+id:text"
          ohos:width="300vp"
          ohos:height="100vp"
          ohos:text="Liziba"
          ohos:text_size="100px"
          ohos:text_color="#0000FF"
          ohos:text_font="serif"
          ohos:italic="true"
          ohos:text_weight="100"
          ohos:left_margin="15vp"
          ohos:bottom_margin="15vp"
          ohos:right_padding="15vp"
          ohos:left_padding="15vp"
          ohos:text_alignment="bottom|horizontal_center"
          ohos:background_element="$graphic:background_text"
          />

**演示效果：**  
![在这里插入图片描述][90c2abf1b126410684c1740bfeeae0c5.png]

### 2.9 multiple\_lines ###

**代码演示：**

<Text
          ohos:id="$+id:text"
          ohos:width="300px"
          ohos:height="match_content"
          ohos:text="LizibaLiziba"
          ohos:text_size="100px"
          ohos:text_color="#0000FF"
          ohos:text_font="serif"
          ohos:italic="true"
          ohos:text_weight="100"
          ohos:max_text_lines="2"
          ohos:multiple_lines="true"
          ohos:background_element="$graphic:background_text"
          />

**演示效果：**  
![在这里插入图片描述][578f8cce86544495b7824035d55745f6.png]

### 2.10 max\_text\_lines ###

**代码演示：**

<Text
          ohos:id="$+id:text"
          ohos:width="300px"
          ohos:height="match_content"
          ohos:text="LizibaLizibaLiziba"
          ohos:text_size="100px"
          ohos:text_color="#0000FF"
          ohos:text_font="serif"
          ohos:italic="true"
          ohos:text_weight="100"
          ohos:multiple_lines="true"
          ohos:max_text_lines="2"
          ohos:background_element="$graphic:background_text"
          />

**演示效果：**  
![在这里插入图片描述][efbe3a97b6894d7faaecabd40e77ea11.png]

### 2.11 auto\_font\_size ###

**代码演示：**  
**方法一：**

<Text
          ohos:id="$+id:text"
          ohos:width="300px"
          ohos:height="match_content"
          ohos:text="LizibaLizibaLiziba"
          ohos:text_size="100px"
          ohos:text_color="#0000FF"
          ohos:text_font="serif"
          ohos:italic="true"
          ohos:text_weight="100"
          ohos:max_text_lines="1"
          ohos:auto_font_size="true"
          ohos:background_element="$graphic:background_text"
          />

**演示效果：**  
![在这里插入图片描述][a6f4330e12864f2bb31a2a7f2b1d306a.png]

**方法二：**

<Text
          ohos:id="$+id:text"
          ohos:width="300px"
          ohos:height="match_content"
          ohos:text="L"
          ohos:text_size="100px"
          ohos:text_color="#0000FF"
          ohos:text_font="serif"
          ohos:italic="true"
          ohos:text_weight="100"
          ohos:max_text_lines="1"
          ohos:auto_font_size="true"
          ohos:background_element="$graphic:background_text"
          />

package com.liziba.demo.slice;
    
    import com.liziba.demo.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.agp.components.Component;
    import ohos.agp.components.Text;
    
    public class MainAbilitySlice extends AbilitySlice {
        
        @Override
        public void onStart(Intent intent) {
        
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
    
            // 每次点击修改内容，演示字体的自动调整
            Text text = (Text) this.findComponentById(ResourceTable.Id_text);
            text.setClickedListener(component -> {
        
                text.setText(text.getText() + "L");
            });
        }
    }

**演示效果：**  
**开始点击前**  
![在这里插入图片描述][f0d814297aba42c5bbcfba33cd5f983b.png]

**连续点击后**  
![在这里插入图片描述][de86d26c7fd04211bff8429a6c8c489a.png]

### 2.12 AutoScrolling ###

当文本过长时，可以设置跑马灯效果，实现文本滚动显示。前提是文本换行关闭且最大显示行数为1，默认情况下即可满足前提要求。  
**代码演示：**

package com.liziba.demo.slice;
    
    import com.liziba.demo.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.Component;
    import ohos.agp.components.Text;
    
    public class MainAbilitySlice extends AbilitySlice {
        
        @Override
        public void onStart(Intent intent) {
        
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
    
            Text text = (Text) this.findComponentById(ResourceTable.Id_text);
            // 跑马灯效果
            text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
            // 始终处于自动滚动状态
            text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
            //启动跑马灯效果
            text.startAutoScrolling();
        }
    
        @Override
        public void onActive() {
        
            super.onActive();
        }
    
        @Override
        public void onForeground(Intent intent) {
        
            super.onForeground(intent);
        }
    
    }

**演示效果：**  
![在这里插入图片描述][009691f72a5242f6adf120ca22019e6d.png]

[Link 1]: https://blog.csdn.net/qq_41125219/category_11227374.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTI1MjE5_size_16_color_FFFFFF_t_70]: /images/20220829/cebccab6847e43b199bf538a1bd94baf.png
[https_developer.harmonyos.com_cn_docs_documentation_doc-guides_ui-java-component-text-0000001050729534]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-text-0000001050729534
[5cebd871608944388cf330587ea0ccd9.png]: /images/20220829/bd7d8afab2714e38ae14a9dec1fcd666.png
[efed5e77e33b40ff8ba08bda75c4d4d4.png]: /images/20220829/6e2cfda1a75f4c41b4cd18dcebcd872b.png
[70df698b74dd49a8a3fcd75c925d004c.png]: /images/20220829/a0a37f7252ec4410b860bbf7a517d0d4.png
[b9ae6e438b07475187ae487052027e72.png]: /images/20220829/5a35be7efcfb40efb62aee7e2cfdc36b.png
[498798ca17ab41968a53e5fbadb09f56.png]: /images/20220829/ffb1ad6d20204c349927f7b3190070b9.png
[fb272eff64d54d41b880106532f94845.png]: /images/20220829/09d2d30da7d14c638a993a72aa90feaf.png
[9526db41166b435f9ba66f9c59ef267c.png]: /images/20220829/1bd6356e60f04a368fb238cc0818b457.png
[7528881f782a4f45bc2354206c2e205e.png]: /images/20220829/a1f55314ac4a48e6806d0d013e96f24a.png
[37983b4a71af4b6a9ab3d9c9871c082b.png]: /images/20220829/e7fe3e1e024a422db19982b91aae34f6.png
[graphic]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-resource-file-categories-0000001052066099#ZH-CN_TOPIC_0000001062847941__p523519228297
[7315779ed7cd43e3aa8e23025b9e63ad.png]: /images/20220829/b664c61b886e4a3da46c3c48171da4f2.png
[90c2abf1b126410684c1740bfeeae0c5.png]: /images/20220829/d30711cf483f4702bd285d2bde1bb7e3.png
[578f8cce86544495b7824035d55745f6.png]: /images/20220829/56117bcfefa443818bd3ea2baaff2ceb.png
[efbe3a97b6894d7faaecabd40e77ea11.png]: /images/20220829/bc9244ae4ac9489d981b3acd481e8e17.png
[a6f4330e12864f2bb31a2a7f2b1d306a.png]: /images/20220829/de30f6674d4041cc916abc4ee016b5ee.png
[f0d814297aba42c5bbcfba33cd5f983b.png]: /images/20220829/4fad78003ae24d55aa16708f49664f91.png
[de86d26c7fd04211bff8429a6c8c489a.png]: /images/20220829/f6bcb97f7edd41bc9a98dd0b5a3239ed.png
[009691f72a5242f6adf120ca22019e6d.png]: /images/20220829/7689256f7176423c83d6075f32d5db5b.png