一、支持的 XML 屬性

• Text 是用來(lái)顯示字符串的組件，在界面上顯示為一塊文本區(qū)域。Text 作為一個(gè)基本組件，有很多擴(kuò)展，常見(jiàn)的有按鈕組件 Button，文本編輯組件 TextField。
• Text 的共有 XML 屬性繼承自 Component，詳情請(qǐng)參考：HarmonyOS之組件通用的XML屬性總覽。
• Text 的自有 XML 屬性：

屬性名稱(chēng)中文描述取值取值說(shuō)明使用案例text顯示文本string類(lèi)型可以直接設(shè)置文本字串，也可以引用string資源ohos:text="熄屏?xí)r間" ohos:text="$string:test_str"hint提示文本string類(lèi)型可以直接設(shè)置文本字串，也可以引用string資源ohos:hint="聯(lián)系人" ohos:hint="$string:test_str"text_font字體sans-serif可以設(shè)置的字體如表中所列ohos:text_font="HwChinese-medium"sans-serif-mediumHwChinese-mediumsans-serif-condensedsans-serif-condensed-mediummonospacetruncation_mode長(zhǎng)文本截?cái)喾绞絥one表示文本超長(zhǎng)時(shí)無(wú)截?cái)鄌hos:truncation_mode="none"ellipsis_at_start表示文本超長(zhǎng)時(shí)在文本框起始處使用省略號(hào)截?cái)鄌hos:truncation_mode="ellipsis_at_start"ellipsis_at_middle表示文本超長(zhǎng)時(shí)在文本框中間位置使用省略號(hào)截?cái)鄌hos:truncation_mode="ellipsis_at_middle"ellipsis_at_end表示文本超長(zhǎng)時(shí)在文本框結(jié)尾處使用省略號(hào)截?cái)鄌hos:truncation_mode="ellipsis_at_end"auto_scrolling表示文本超長(zhǎng)時(shí)滾動(dòng)顯示全部文本ohos:truncation_mode="auto_scrolling"text_size文本大小float類(lèi)型表示字體大小的float類(lèi)型?？梢允歉↑c(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:text_size="30" ohos:text_size="16fp" ohos:text_size="$float:size_value"element_padding文本與圖片的邊距float類(lèi)型表示間距尺寸的float類(lèi)型。 可以是浮點(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:element_padding="20" ohos:element_padding="8vp" ohos:element_padding="$float:size_value"bubble_width文本氣泡寬度f(wàn)loat類(lèi)型表示尺寸的float類(lèi)型。可以是浮點(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:bubble_width="20" ohos:bubble_width="10vp" ohos:bubble_width="$float:size_value"bubble_height文本氣泡高度f(wàn)loat類(lèi)型表示尺寸的float類(lèi)型?？梢允歉↑c(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:bubble_height="20" ohos:bubble_height="10vp" ohos:bubble_height="$float:size_value"bubble_left_width文本氣泡左寬度f(wàn)loat類(lèi)型表示尺寸的float類(lèi)型。可以是浮點(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:bubble_left_width="20" ohos:bubble_left_width="10vp" ohos:bubble_left_width="$float:size_value"bubble_left_height文本氣泡左高度f(wàn)loat類(lèi)型表示尺寸的float類(lèi)型。 可以是浮點(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:bubble_left_height="20" ohos:bubble_left_height="10vp" ohos:bubble_left_height="$float:size_value"bubble_right_width文本氣泡右寬度f(wàn)loat類(lèi)型表示尺寸的float類(lèi)型?？梢允歉↑c(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:bubble_right_width="20" ohos:bubble_right_width="10vp" ohos:bubble_right_width="$float:size_value"bubble_right_height文本氣泡右高度f(wàn)loat類(lèi)型表示尺寸的float類(lèi)型。可以是浮點(diǎn)數(shù)值，其默認(rèn)單位為px；也可以是帶px/vp/fp單位的浮點(diǎn)數(shù)值；也可以引用float資源ohos:bubble_right_height="20" ohos:bubble_right_height="10vp" ohos:bubble_right_height="$float:size_value"text_color文本顏色color類(lèi)型可以直接設(shè)置色值，也可以引用color資源ohos:text_color="#A8FFFFFF" ohos:text_color="$color:black"hint_color提示文本顏色color類(lèi)型可以直接設(shè)置色值，也可以引用color資源ohos:hint_color="#A8FFFFFF" ohos:hint_color="$color:black"selection_color選中文本顏色color類(lèi)型可以直接設(shè)置色值，也可以引用color資源ohos:selection_color="#A8FFFFFF" ohos:selection_color="$color:black"max_text_lines文本最大行數(shù)integer類(lèi)型可以直接設(shè)置整型數(shù)值，也可以引用integer資源ohos:max_text_lines="2" ohos:max_text_lines="$integer:two"text_alignment文本對(duì)齊方式left表示文本靠左對(duì)齊可以設(shè)置取值項(xiàng)如表中所列，也可以使用“|”進(jìn)行多項(xiàng)組合。 ohos:text_alignment="top" ohos:text_alignment="top|left"top表示文本靠頂部對(duì)齊right表示文本靠右對(duì)齊bottom表示文本靠底部對(duì)齊horizontal_center表示文本水平居中對(duì)齊vertical_center表示文本垂直居中對(duì)齊center表示文本居中對(duì)齊start表示文本靠開(kāi)始端對(duì)齊end表示文本靠結(jié)尾端對(duì)齊text_input_type文本輸入類(lèi)型pattern_null表示未指定文本輸入類(lèi)型，默認(rèn)文本輸入類(lèi)型為內(nèi)容模式ohos:text_input_type="pattern_null"pattern_text表示文本輸入類(lèi)型為普通文本模式ohos:text_input_type="pattern_text"pattern_number表示文本輸入類(lèi)型為數(shù)字ohos:text_input_type="pattern_number"pattern_password表示文本輸入類(lèi)型為密碼ohos:text_input_type="pattern_password"input_enter_key_type輸入鍵類(lèi)型enter_key_type_unspecified表示未指定輸入鍵類(lèi)型，采用默認(rèn)類(lèi)型ohos:input_enter_key_type="enter_key_type_unspecified"enter_key_type_search表示采用執(zhí)行“搜索”動(dòng)作的輸入鍵類(lèi)型ohos:input_enter_key_type="enter_key_type_search"enter_key_type_go表示采用執(zhí)行“go”動(dòng)作的輸入鍵類(lèi)型ohos:input_enter_key_type="enter_key_type_go"enter_key_type_send表示采用執(zhí)行“發(fā)送”動(dòng)作的輸入鍵類(lèi)型ohos:input_enter_key_type="enter_key_type_send"auto_scrolling_duration自動(dòng)滾動(dòng)時(shí)長(zhǎng)integer類(lèi)型可以直接設(shè)置整型數(shù)值，也可以引用integer資源。 表示時(shí)間的值不可小于0，單位為msohos:auto_scrolling_duration="1000" ohos:auto_scrolling_duration="$integer:during"multiple_lines多行模式設(shè)置boolean類(lèi)型可以直接設(shè)置true/false，也可以引用boolean資源ohos:multiple_lines="true" ohos:multiple_lines="$boolean:true"auto_font_size是否支持文本自動(dòng)調(diào)整文本字體大小boolean類(lèi)型可以直接設(shè)置true/false，也可以引用boolean資源ohos:auto_font_size="true" ohos:auto_font_size="$boolean:true"scrollable文本是否可滾動(dòng)boolean類(lèi)型可以直接設(shè)置true/false，也可以引用boolean資源ohos:scrollable="true" ohos:scrollable="$boolean:true"text_cursor_visible文本光標(biāo)是否可見(jiàn)。只有在可編輯的組件上可配置，否則該值始終為falseboolean類(lèi)型可以直接設(shè)置true/false，也可以引用boolean資源ohos:text_cursor_visible="true" ohos:text_cursor_visible="$boolean:true"italic文本是否斜體字體boolean類(lèi)型可以直接設(shè)置true/false，也可以引用boolean資源ohos:italic="true" ohos:italic="$boolean:true"padding_for_text設(shè)置文本頂部與底部是否默認(rèn)留白。默認(rèn)值為true，true表示保留默認(rèn)留白，false表示頂部與底部不留白boolean類(lèi)型可以直接設(shè)置true/false，也可以引用boolean資源ohos:padding_for_text="true" ohos:padding_for_text="$boolean:true"additional_line_spacing需增加的行間距float類(lèi)型可以直接設(shè)置浮點(diǎn)數(shù)值，也可以引用float浮點(diǎn)數(shù)資源ohos:additional_line_spacing="2" ohos:additional_line_spacing="$float:line_spacing_add"line_height_num行間距倍數(shù)float類(lèi)型可以直接設(shè)置浮點(diǎn)數(shù)值，也可以引用float浮點(diǎn)數(shù)資源ohos:line_height_num="1.5" ohos:line_height_num="$float:line_spacing_multi"element_left文本左側(cè)圖標(biāo)Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_left="#FFFFFFFF" ohos:element_left="$color:black" ohos:element_left="$media:media_src" ohos:element_left="$graphic:graphic_src"element_top文本上方圖標(biāo)Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_top="#FFFFFFFF" ohos:element_top="$color:black" ohos:element_top="$media:media_src" ohos:element_top="$graphic:graphic_src"element_right文本右側(cè)圖標(biāo)Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_right="#FFFFFFFF" ohos:element_right="$color:black" ohos:element_right="$media:media_src" ohos:element_right="$graphic:graphic_src"element_bottom文本下方圖標(biāo)Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_bottom="#FFFFFFFF" ohos:element_bottom="$color:black" ohos:element_bottom="$media:media_src" ohos:element_bottom="$graphic:graphic_src"element_start文本開(kāi)始方向圖標(biāo)Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_start="#FFFFFFFF" ohos:element_start="$color:black" ohos:element_start="$media:media_src" ohos:element_start="$graphic:graphic_src"element_end文本結(jié)束方向圖標(biāo)Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_end="#FFFFFFFF" ohos:element_end="$color:black" ohos:element_end="$media:media_src" ohos:element_end="$graphic:graphic_src"element_cursor_bubble文本的光標(biāo)氣泡圖形，只有在可編輯的組件上可配置Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_cursor_bubble="#FFFFFFFF" ohos:element_cursor_bubble="$color:black" ohos:element_cursor_bubble="$media:media_src" ohos:element_cursor_bubble="$graphic:graphic_src"element_selection_left_bubble選中文本的左側(cè)氣泡圖形Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_selection_left_bubble="#FFFFFFFF" ohos:element_selection_left_bubble="$color:black" ohos:element_selection_left_bubble="$media:media_src" ohos:element_selection_left_bubble="$graphic:graphic_src"element_selection_right_bubble選中文本的右側(cè)氣泡圖形Element類(lèi)型可直接配置色值，也可引用color資源或引用media/graphic下的圖片資源ohos:element_selection_right_bubble="#FFFFFFFF" ohos:element_selection_right_bubble="$color:black" ohos:element_selection_right_bubble="$media:media_src" ohos:element_selection_right_bubble="$graphic:graphic_src"

二、創(chuàng)建 Text

• 在 layout 目錄下的 xml 文件中創(chuàng)建 Text，如下所示：

<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:text="Text"/>

三、設(shè)置 Text

• 在 xml 中設(shè)置 Text 的背景，layout 目錄下 xml 文件的代碼示例如下：

<Text...ohos:background_element="$graphic:background_text"/>

• 常用的背景如常見(jiàn)的文本背景、按鈕背景，可以采用 XML 格式放置在 graphic 目錄下。
• 在“Project”窗口，打開(kāi)“entry > src > main > resources > base”，右鍵點(diǎn)擊“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"><cornersohos:radius="20"/><solidohos:color="#878787"/></shape>

• 使用 xml 設(shè)置 Text 背景的效果：

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

<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:text="Text"ohos:text_size="28fp"ohos:text_color="#0000FF"ohos:left_margin="15vp"ohos:bottom_margin="15vp"ohos:right_padding="15vp"ohos:left_padding="15vp"ohos:background_element="$graphic:background_text"/>

• 設(shè)置字體大小和顏色的效果如下：

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

<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:text="Text"ohos:text_size="28fp"ohos:text_color="#0000FF"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:background_text"/>

• 設(shè)置字體風(fēng)格和字重的效果如下：

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

<Textohos:id="$+id:text"ohos:width="300vp"ohos:height="100vp"ohos:text="Text"ohos:text_size="28fp"ohos:text_color="#0000FF"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:background_text"/>

• 設(shè)置文本對(duì)齊方式的效果：

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

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

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

四、自動(dòng)調(diào)節(jié)字體大小

• Text 對(duì)象支持根據(jù)文本長(zhǎng)度自動(dòng)調(diào)整文本的字體大小和換行。
• 設(shè)置自動(dòng)換行、最大顯示行數(shù)和自動(dòng)調(diào)節(jié)字體大小：

<Textohos:id="$+id:text"ohos:width="90vp"ohos:height="match_content"ohos:min_height="30vp"ohos:text="T"ohos:text_color="#0000FF"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:background_text"/>

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

Text text = (Text) findComponentById(ResourceTable.Id_text);// 設(shè)置自動(dòng)調(diào)整規(guī)則text.setAutoFontSizeRule(30, 100, 1);// 設(shè)置點(diǎn)擊一次增多一個(gè)"T"text.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {text.setText(text.getText() + "T");}});

• 自動(dòng)調(diào)節(jié)字體大小效果展示：

五、跑馬燈效果

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

<Textohos:id="$+id:text"ohos:width="75vp"ohos:height="match_content"ohos:text="TextText"ohos:text_size="28fp"ohos:text_color="#0000FF"ohos:italic="true"ohos:text_weight="700"ohos:text_font="serif"ohos:background_element="$graphic:background_text"/> // 跑馬燈效果text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);// 始終處于自動(dòng)滾動(dòng)狀態(tài)text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);// 啟動(dòng)跑馬燈效果text.startAutoScrolling();

• 跑馬燈效果展示：

六、場(chǎng)景示例

• 利用文本組件實(shí)現(xiàn)一個(gè)標(biāo)題欄和詳細(xì)內(nèi)容的界面，如下：

• 源碼示例：

<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:background_element="$graphic:color_light_gray_element"><Textohos: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:background_text"ohos:text="Title"ohos:text_weight="1000"ohos:text_alignment="horizontal_center"/><Textohos:id="$+id:text2"ohos:width="match_parent"ohos:height="120vp"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"/><Buttonohos:id="$+id:button1"ohos:width="75vp"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:left_padding="5vp"ohos:right_padding="5vp"ohos:below="$id:text2"ohos:left_of="$id:button2"ohos:text_font="serif"/><Buttonohos:id="$+id:button2"ohos:width="75vp"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:left_padding="5vp"ohos:right_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"><solidohos: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"><cornersohos:radius="20"/><solidohos:color="#878787"/></shape>

總結(jié)

以上是生活随笔為你收集整理的HarmonyOS之常用组件Text的功能和使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。