【HarmonyOS 專題】03 簡單瞭解 Text 文本屬性

    小菜在之前嘗試通過 XML 構建一個最基礎的【登錄】頁面，其中使用了 Image / Button / Text / TextField 等幾個最常用的小控件；小菜逐一進行學習嘗試；

Text

    Text 文本件在大部分語言編程中都是最常見且使用頻率最高的控件；HarmonyOS 中的 Text 繼承自 Component；小菜理解爲 Android 中的 TextView 與 View 的關係；因此 Component 中的屬性，在 Text 中基本都可以使用；

    小菜主要嘗試一些相較於 Component 而言 Text 文本所特有的屬性；

案例嘗試

1. text & hint

    text 和 hint 很容易理解，分別爲文本內容和默認提示文本內容；

 <Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text="阿策小和尚"
    ohos:text_size="16fp"/>

ohos:hint="阿策小和尚 hint"

2. text_color & hint_color

    text_color 和 hint_color 分別對應文本字體顏色和默認提示文本字體顏色；

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text="阿策小和尚"
    ohos:text_color="$ohos:color:id_color_badge_red"
    ohos:text_size="16fp"/>

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:hint="阿策小和尚 hint"
    ohos:hint_color="$ohos:color:id_color_bottom_tab_icon"
    ohos:text_size="16fp"/>

3. text_size & text_font

    text_size 對應文本字號，同樣適用默認提示文本；text_font 對應文本字體，例如 sans-serif / sans-serif-medium / HwChinese-medium 等；

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text="阿策小和尚"
    ohos:text_color="$ohos:color:id_color_badge_red"
    ohos:text_size="20fp"/>
    
<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text="阿策小和尚"
    ohos:text_color="$ohos:color:id_color_badge_red"
    ohos:text_font="HwChinese-medium"
    ohos:text_size="20fp"/>

4. italic & text_alignment

    italic 爲文字是否爲斜體；text_alignment 爲文本對齊方式，添加一個背景圖更容易看到效果，對齊屬性也很容易理解；

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:italic="true"
    ohos:text="阿策小和尚"
    ohos:text_color="$ohos:color:id_color_badge_red"
    ohos:text_font="HwChinese-medium"
    ohos:text_size="20fp"/>
    
<Text
    ohos:height="80vp"
    ohos:width="match_parent"
    ohos:background_element="$graphic:regist_btn_bg"
    ohos:text="阿策小和尚"
    ohos:text_alignment="center"
    ohos:text_color="$ohos:color:id_color_badge_red"
    ohos:text_size="20fp"/>

5. element_left & element_top & element_right & element_bottom & element_start & element_end & element_padding

    element_left 等爲文本中添加圖標的爲止，即 左側 / 右側 / 頂部 / 底部 / 開始爲止 / 結束爲止；element_padding 爲文本圖標與文本之間的變局；

    Tips: 注意 element_right 與 element_start / element_end 屬性有衝突，不建議一起使用；在 水平佈局方向爲從左到右 時，element_right 會與 element_end 屬性衝突；在 水平佈局方向爲從右到左 時，element_right 會與 element_start 屬性衝突；同時配置時，element_start / element_end 優先級高於 element_right / element_left 屬性；

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text="HarmonyOS是一款面向萬物互聯時代的、全新的分佈式操作系統。在傳統的單設備系統能力基礎上，HarmonyOS提出了基於同一套系統能力、適配多種終端形態的分佈式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業務能力。"
    ohos:text_color="$ohos:color:id_color_badge_red"
    ohos:text_size="20fp"
    ohos:element_padding="20vp"
    ohos:element_left="$media:icon"/>

6. truncation_mode & scrollable & auto_scrolling_duration & auto_scrolling_count

    truncation_mode 爲文本的截取方式，當文本內容超過設置寬度範圍時，HarmonyOS 提供了多種截斷方式；none 爲無截斷，ellipsis_at_start/middle/end 爲在文本框起始/中間/結束處使用省略號截斷，auto_scrolling 爲滾動顯示；

    scrollable 爲文本是否可滾動；auto_scrolling_duration 對應自動滾動時長；auto_scrolling_count 對應滾動次數，默認爲無限次；小菜在測試過程中，單純的 XML 文件調整並不會實現跑馬燈效果，需要在 Java 端使用 startAutoScrolling() 啓動跑馬燈效果；

<Text
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="10vp"
    ohos:text="HarmonyOS是一款面向萬物互聯時代的、全新的分佈式操作系統。在傳統的單設備系統能力基礎上，HarmonyOS提出了基於同一套系統能力、適配多種終端形態的分佈式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業務能力。"
    ohos:text_size="20fp"
    ohos:truncation_mode="ellipsis_at_end"
    ohos:element_left="$media:icon"
    />
    
<Text
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:top_margin="10vp"
    ohos:text="HarmonyOS是一款面向萬物互聯時代的、全新的分佈式操作系統。在傳統的單設備系統能力基礎上，HarmonyOS提出了基於同一套系統能力、適配多種終端形態的分佈式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業務能力。"
    ohos:text_size="20fp"
    ohos:truncation_mode="auto_scrolling"
    ohos:scrollable="true"
    ohos:auto_scrolling_count="1"
    ohos:auto_scrolling_duration="100"
    ohos:element_left="$media:icon"
    />

Text text1 =(Text) findComponentById(ResourceTable.Id_test_tv1);
text1.startAutoScrolling();

7. max_text_lines & multiple_lines

    max_text_lines 爲文本設置的最大行數；multiple_lines 爲多行模式，只有爲 true 時才允許換行；

<Text
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text="HarmonyOS是一款面向萬物互聯時代的、全新的分佈式操作系統。在傳統的單設備系統能力基礎上，HarmonyOS提出了基於同一套系統能力、適配多種終端形態的分佈式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業務能力。"
    ohos:text_size="20fp"
    ohos:top_margin="10vp"
    ohos:multiple_lines="true"
    ohos:max_text_lines="4"
    ohos:truncation_mode="ellipsis_at_end"
    ohos:element_left="$media:icon"
    ohos:background_element="$graphic:background_ability_text"
    />

8. additional_line_spacing & line_height_num

    additional_line_spacing 對應文本行間距，取值爲 float 類型，爲具體的值；而 line_height_num 對應行間距倍數，包括設置的 additional_line_spacing 文本行間距；

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:additional_line_spacing="20"
    ohos:line_height_num="2"
    ohos:multiple_lines="true"
    ohos:text="HarmonyOS是一款面向萬物互聯時代的、全新的分佈式操作系統。在傳統的單設備系統能力基礎上，HarmonyOS提出了基於同一套系統能力、適配多種終端形態的分佈式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業務能力。"
    ohos:text_color="$ohos:color:id_color_badge_red"
    ohos:text_size="20fp"/>

9. auto_font_size & padding_for_text

    auto_font_size 爲是否支持文本自動調整文本字體大小；padding_for_text 對應設置文本頂部與底部是否默認留白，默認爲 true，但小菜嘗試過程中效果並不明顯；

    在使用 auto_font_size 過程中需要在 Java 端設置字號變化規則，及最大最小字號等；

<Text
    ohos:id="$+id:test_tv2"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:auto_font_size="true"
    ohos:element_left="$media:icon"
    ohos:max_text_lines="1"
    ohos:multiple_lines="true"
    ohos:text="HarmonyOS"
    ohos:text_size="20fp"
    ohos:top_margin="10vp"
    />
    
Text text2 =(Text) findComponentById(ResourceTable.Id_test_tv2);
text2.setAutoFontSizeRule(20, 50, 1);
text2.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        text2.setText(text2.getText() + " HarmonyOS");
    }
});

    Text 中還有很多是在可編輯狀態下的屬性，小菜暫時僅研究靜態屬性，與 Android / Flutter 有很多相似的用法，使用難度較簡單；對於 HarmonyOS 是剛起步狀態，如有錯誤，請多多指導！

來源： 阿策小和尚