【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 優(yōu)先級高于 element_right / element_left 屬性；

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:text="HarmonyOS是一款面向萬物互聯(lián)時代的、全新的分布式操作系統(tǒng)。在傳統(tǒng)的單設備系統(tǒng)能力基礎上，HarmonyOS提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業(yè)務能力。"
    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是一款面向萬物互聯(lián)時代的、全新的分布式操作系統(tǒng)。在傳統(tǒng)的單設備系統(tǒng)能力基礎上，HarmonyOS提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業(yè)務能力。"
    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是一款面向萬物互聯(lián)時代的、全新的分布式操作系統(tǒng)。在傳統(tǒng)的單設備系統(tǒng)能力基礎上，HarmonyOS提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業(yè)務能力。"
    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是一款面向萬物互聯(lián)時代的、全新的分布式操作系統(tǒng)。在傳統(tǒng)的單設備系統(tǒng)能力基礎上，HarmonyOS提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業(yè)務能力。"
    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是一款面向萬物互聯(lián)時代的、全新的分布式操作系統(tǒng)。在傳統(tǒng)的單設備系統(tǒng)能力基礎上，HarmonyOS提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持手機、平板、智能穿戴、智慧屏、車機等多種終端設備，提供全場景（移動辦公、運動健康、社交通信、媒體娛樂等）業(yè)務能力。"
    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 端設置字號變化規(guī)則，及最大最小字號等；

<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 中還有很多是在可編輯狀態(tài)下的屬性，小菜暫時僅研究靜態(tài)屬性，與 Android / Flutter 有很多相似的用法，使用難度較簡單；對于 HarmonyOS 是剛起步狀態(tài)，如有錯誤，請多多指導！

來源： 阿策小和尚

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容