文本(Text)是用來顯示字符串的組件,在界面上顯示為一塊文本區(qū)域。Text 作為一個(gè)基本組件,有很多擴(kuò)展,常見的有按鈕組件 Button,文本編輯組件 TextField。
使用 Text
- 創(chuàng)建 Text
color_gray_element.xml:
?xml version="1.0" encoding="utf-8"??>
/shape?>
圖1 創(chuàng)建一個(gè) Text


- 設(shè)置背景
常用的背景如常見的文本背景、按鈕背景,可以采用XML格式放置在 graphic 目錄下。
在“Project”窗口,打開“entry > src > main > resources > base”,右鍵點(diǎn)擊“base”文件夾,選擇“New > Directory”,命名為“graphic”。右鍵點(diǎn)擊“graphic”文件夾,選擇“New > File”,命名為“textelement.xml”。
圖2 創(chuàng)建 textelement.xml 文件后的 resources 目錄結(jié)構(gòu)


在 textelement.xml 中定義文本的背景:
?xml version="1.0" encoding="utf-8"??>
/shape?>
在 first_layout.xml 中引用上面定義的文本背景:
- 設(shè)置字體大小和顏色
圖3 設(shè)置字體大小和顏色的效果


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

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


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


自動(dòng)調(diào)節(jié)字體大小
Text對(duì)象支持根據(jù)文本長度自動(dòng)調(diào)整文本的字體大小和換行。
- 設(shè)置自動(dòng)換行、最大顯示行數(shù)和自動(dòng)調(diào)節(jié)字體大小。
- 通過 setAutoFontSizeRule 設(shè)置自動(dòng)調(diào)整規(guī)則,三個(gè)入?yún)⒎謩e是最小的字體大小、最大的字體大小、每次調(diào)整文本字體大小的步長。
// 設(shè)置自動(dòng)調(diào)整規(guī)則
text.setAutoFontSizeRule(30, 100, 1);
// 設(shè)置點(diǎn)擊一次增多一個(gè)"T"
text.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component Component) {
text.setText(text.getText() + "T");
}
});
圖7 自動(dòng)調(diào)節(jié)字體大小


跑馬燈效果
當(dāng)文本過長時(shí),可以設(shè)置跑馬燈效果,實(shí)現(xiàn)文本滾動(dòng)顯示。前提是文本換行關(guān)閉且最大顯示行數(shù)為1,默認(rèn)情況下即可滿足前提要求。
// 跑馬燈效果
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// 啟動(dòng)跑馬燈效果
text.startAutoScrolling();
圖8 跑馬燈效果


場(chǎng)景示例
利用文本組件實(shí)現(xiàn)一個(gè)標(biāo)題欄和詳細(xì)內(nèi)容的界面。
圖9 界面效果


源碼示例:
?xml version="1.0" encoding="utf-8"??>
/DependentLayout?>
color_light_gray_element.xml:
?xml version="1.0" encoding="utf-8"??>
/shape?>
textelement.xml:
?xml version="1.0" encoding="utf-8"??>
/shape?>
審核編輯 黃宇
-
HarmonyOS
+關(guān)注
關(guān)注
80文章
2121瀏覽量
32741 -
鴻蒙OS
+關(guān)注
關(guān)注
0文章
191瀏覽量
4957
發(fā)布評(píng)論請(qǐng)先 登錄
鴻蒙開發(fā)基礎(chǔ)-Web組件之cookie操作
想了解下鴻蒙os的生態(tài)問題!
文本組件 - Text 精華
鴻蒙os系統(tǒng)是什么意思 鴻蒙os系統(tǒng)有什么作用
請(qǐng)問鴻蒙的JS UI如何獲得當(dāng)前組件的Value的值?
鴻蒙 OS 應(yīng)用開發(fā)初體驗(yàn)
華為鴻蒙OS又有嚇人的設(shè)計(jì) 蘋果的Carplay在鴻蒙OS面前真的自嘆不如
鴻蒙OS系統(tǒng)詳解
鴻蒙OS與Lite OS的區(qū)別是什么
鴻蒙OS 2.0系統(tǒng)怎么安裝 鴻蒙系統(tǒng)安裝教程
鴻蒙os怎么升級(jí)
鴻蒙os系統(tǒng) 支持哪些手機(jī)
鴻蒙os2.0系統(tǒng)官網(wǎng)

評(píng)論