鴻蒙OS Text

文本（Text）是用來顯示字符串的組件，在界面上顯示為一塊文本區(qū)域。Text 作為一個基本組件，有很多擴展，常見的有按鈕組件 Button，文本編輯組件 TextField。

使用 Text

• 創(chuàng)建 Text

  <Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:background_element="$graphic:color_gray_element"/>

color_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="#ff888888"/>
  </shape>

圖1 創(chuàng)建一個 Text

• 設(shè)置背景

常用的背景如常見的文本背景、按鈕背景，可以采用XML格式放置在 graphic 目錄下。

在“Project”窗口，打開“entry > src > main > resources > base”，右鍵點擊“base”文件夾，選擇“New > Directory”，命名為“graphic”。右鍵點擊“graphic”文件夾，選擇“New > File”，命名為“textelement.xml”。

圖2 創(chuàng)建 textelement.xml 文件后的 resources 目錄結(jié)構(gòu)

在 textelement.xml 中定義文本的背景:

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

在 first_layout.xml 中引用上面定義的文本背景：

  <Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:background_element="$graphic:textelement"/>

• 設(shè)置字體大小和顏色

  <Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:left_margin="15vp"
      ohos:bottom_margin="15vp"
      ohos:right_padding="15vp"
      ohos:left_padding="15vp"
      ohos:background_element="$graphic:textelement"/>

圖3 設(shè)置字體大小和顏色的效果

• 設(shè)置字體風(fēng)格和字重

  <Text
      ohos:id="$+id:text"
      ohos:width="match_content"
      ohos:height="match_content"
      ohos:text="Text"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:italic="true"
      ohos:text_weight="700"
      ohos:text_font="serif"
      ohos:left_margin="15vp"
      ohos:bottom_margin="15vp"
      ohos:right_padding="15vp"
      ohos:left_padding="15vp"
      ohos:background_element="$graphic:textelement"/>

圖4 設(shè)置字體風(fēng)格和字重的效果

• 設(shè)置文本對齊方式

  <Text
      ohos:id="$+id:text"
      ohos:width="300vp"
      ohos:height="100vp"
      ohos:text="Text"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:italic="true"
      ohos:text_weight="700"
      ohos:text_font="serif"
      ohos:left_margin="15vp"
      ohos:bottom_margin="15vp"
      ohos:right_padding="15vp"
      ohos:left_padding="15vp"
      ohos:text_alignment="horizontal_center|bottom"
      ohos:background_element="$graphic:textelement"/>

圖5 設(shè)置文本對齊方式的效果

• 設(shè)置文本換行和最大顯示行數(shù)

  <Text
      ohos:id="$+id:text"
      ohos:width="75vp"
      ohos:height="match_content"
      ohos:text="TextText"
      ohos:text_size="28fp"
      ohos:text_color="blue"
      ohos:italic="true"
      ohos:text_weight="700"
      ohos:text_font="serif"
      ohos:multiple_lines="true"
      ohos:max_text_lines="2"
      ohos:background_element="$graphic:textelement"/>

圖6 設(shè)置文本換行和最大顯示行數(shù)的效果

自動調(diào)節(jié)字體大小

Text對象支持根據(jù)文本長度自動調(diào)整文本的字體大小和換行。

1. 設(shè)置自動換行、最大顯示行數(shù)和自動調(diào)節(jié)字體大小。

   <Text
       ohos:id="$+id:text1"
       ohos:width="90vp"
       ohos:height="match_content"
       ohos:min_height="30vp"
       ohos:text="T"
       ohos:text_color="blue"
       ohos:italic="true"
       ohos:text_weight="700"
       ohos:text_font="serif"
       ohos:multiple_lines="true"
       ohos:max_text_lines="1"
       ohos:auto_font_size="true"
       ohos:right_padding="8vp"
       ohos:left_padding="8vp"
       ohos:background_element="$graphic:textelement"/>

1. 通過 setAutoFontSizeRule 設(shè)置自動調(diào)整規(guī)則，三個入?yún)⒎謩e是最小的字體大小、最大的字體大小、每次調(diào)整文本字體大小的步長。

   // 設(shè)置自動調(diào)整規(guī)則
   text.setAutoFontSizeRule(30, 100, 1);
   // 設(shè)置點擊一次增多一個"T"
   text.setClickedListener(new Component.ClickedListener() {
       @Override
       public void onClick(Component Component) {
           text.setText(text.getText() + "T");
       }
   });

圖7 自動調(diào)節(jié)字體大小

跑馬燈效果

當(dāng)文本過長時，可以設(shè)置跑馬燈效果，實現(xiàn)文本滾動顯示。前提是文本換行關(guān)閉且最大顯示行數(shù)為1，默認(rèn)情況下即可滿足前提要求。

<Text
    ohos:id="$+id:text"
    ohos:width="75vp"
    ohos:height="match_content"
    ohos:text="TextText"
    ohos:text_size="28fp"
    ohos:text_color="blue"
    ohos:italic="true"
    ohos:text_weight="700"
    ohos:text_font="serif"
    ohos:background_element="$graphic:textelement"/>




// 跑馬燈效果
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// 啟動跑馬燈效果
text.startAutoScrolling();

圖8 跑馬燈效果

場景示例

利用文本組件實現(xiàn)一個標(biāo)題欄和詳細(xì)內(nèi)容的界面。

圖9 界面效果

源碼示例：

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_content"
    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:background_element="$graphic:textelement"
        ohos:text="Title"
        ohos:text_weight="1000"
        ohos:text_alignment="horizontal_center"/>
    <Text
        ohos:id="$+id:text3"
        ohos:width="match_parent"
        ohos:height="120vp"
        ohos:text_size="25fp"
        ohos:background_element="$graphic:textelement"
        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="75vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:textelement"
        ohos:text="Previous"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:left_padding="5vp"
        ohos:right_padding="5vp"
        ohos:below="$id:text3"
        ohos:left_of="$id:button2"
        ohos:text_font="serif"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="75vp"
        ohos:height="match_content"
        ohos:text_size="15fp"
        ohos:background_element="$graphic:textelement"
        ohos:text="Next"
        ohos:right_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:left_padding="5vp"
        ohos:right_padding="5vp"
        ohos:align_parent_end="true"
        ohos:below="$id:text3"
        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="#ffeeeeee"/>
</shape>

textelement.xml：

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