一、引言
在 HarmonyOS 那豐富多彩的系統界面中,從簡潔直觀的應用圖標,到交互流暢的操作菜單,再到生動形象的圖文展示,每一處細節都經過精心雕琢,為用戶帶來了獨特而美妙的視覺與交互體驗。而在這琳瑯滿目的界面元素中,文本組件(Text)無疑扮演著不可或缺的關鍵角色。它是信息傳遞的直接載體,無論是應用的標題、操作的提示,還是內容的描述,都離不開文本組件的呈現。
你是否曾好奇,那些在 HarmonyOS 界面上風格各異、排版精美的文字是如何實現的?又是否想知道如何讓文本隨著用戶的操作而動態變化,實現更加豐富的交互效果?接下來,就讓我們一同深入探索 HarmonyOS 文本組件的奧秘,解鎖文字在界面上生動呈現的密碼。
二、Text 組件初相識
在 HarmonyOS 的 UI 開發體系中,Text 組件就像是搭建界面大廈的基石,是用于展示文本的基礎組件。它的存在使得應用能夠將各種信息,以文字的形式清晰、準確地呈現給用戶。無論是簡單的提示語、復雜的文章內容,還是應用的標題、按鈕上的文字,都離不開 Text 組件的支持。
在一個音樂播放應用中,歌曲的名稱、歌手信息、歌詞展示等,都可以通過 Text 組件來實現。又比如在一款購物應用里,商品的名稱、價格、促銷信息等文本內容,同樣依賴 Text 組件來展示 。可以說,Text 組件貫穿于 HarmonyOS 應用界面的方方面面,是構建用戶與應用之間信息交互橋梁的重要元素。
三、屬性大揭秘
(一)字體相關屬性
字體選擇:在 HarmonyOS 中設置字體,主要通過text_font屬性來實現。默認情況下,系統會使用默認字體來展示文本。但如果我們想要使用特定的字體,比如HwChinese-medium?、sans-serif-medium等系統自帶字體 ,只需在布局文件中進行如下設置:
<Text ????ohos:id="$+id:text_view" ????ohos:text="這是一段使用特定字體的文本" ????ohos:text_font="HwChinese-medium" ???... /> |
要是系統自帶字體無法滿足需求,還能添加自定義字體。步驟如下:首先準備好自定義的字體文件,通常為.ttf(TrueType Font)或.otf(OpenType Font)格式 。接著將字體文件放置在resources/rawfile目錄下,如果沒有該目錄則需手動創建。然后在代碼中通過編程方式設置字體,例如在 Java 代碼中:
Text textComponent = (Text) findComponentById(ResourceTable.Id_text_view); Typeface customFont = Typeface.createFromAsset(getContext().getAssets(), "rawfile/your_font.ttf"); textComponent.setTypeface(customFont); |
字體大小:通過text_size屬性可以輕松設置字體大小,該屬性支持多種取值方式。如果傳遞的是數字類型,默認單位為 px(像素) 。比如設置字體大小為 16px,可以這樣寫:
<Text ????ohos:id="$+id:text_view" ????ohos:text="字體大小為16px" ????ohos:text_size="16" ???... /> |
也能顯式指定單位,如 vp(視口單位)、fp(字體像素)等。使用 vp 單位時,它會根據設備的屏幕密度自動調整大小,保證在不同設備上元素的顯示效果一致。例如設置字體大小為 20vp:
<Text ????ohos:id="$+id:text_view" ????ohos:text="字體大小為20vp" ????ohos:text_size="20vp" ???... /> |
而 fp 是鴻蒙系統專門用于定義字體大小的單位,能在不同的屏幕密度和分辨率下自動調整字體大小,確保字體在所有設備上都清晰可讀。如設置字體大小為 18fp:
<Text ????ohos:id="$+id:text_view" ????ohos:text="字體大小為18fp" ????ohos:text_size="18fp" ???... /> |
字體風格:設置字體風格主要通過font_style屬性,取值有normal(正常)和italic(斜體) 。默認值為normal,顯示正常字體風格。若要設置為斜體,代碼如下:
<Text ????ohos:id="$+id:text_view" ????ohos:text="這是斜體風格的文本" ????ohos:font_style="italic" ???... /> |
字體粗細:通過font_weight屬性來設置字體粗細,取值范圍較為豐富,包括normal(正常)、bold(粗體)、bolder(更粗)、lighter(更細) ,以及數字 100 - 900,數字越大字體越粗。例如設置為粗體:
<Text ????ohos:id="$+id:text_view" ????ohos:text="這是粗體文本" ????ohos:font_weight="bold" ???... /> |
要是想設置為更細的字體風格,則可以這樣設置:
<Text ????ohos:id="$+id:text_view" ????ohos:text="這是更細的文本" ????ohos:font_weight="lighter" ???... /> |
(二)顏色屬性
文本顏色:設置文本顏色使用text_color屬性,它支持多種顏色表示方式。最常見的是使用十六進制顏色值,比如設置文本顏色為紅色:
<Text ????ohos:id="$+id:text_view" ????ohos:text="紅色文本" ????ohos:text_color="#FF0000" ???... /> |
也能引用color資源文件中的顏色,首先在resources/base/color目錄下的color.json文件中定義顏色:
{ ????"color": [ ????????{ ????????????"name": "my_red", ????????????"value": "#FF0000" ????????} ????] } |
然后在布局文件中引用:
<Text ????ohos:id="$+id:text_view" ????ohos:text="從資源文件引用的紅色文本" ????ohos:text_color="$color:my_red" ???... /> |
此外,還支持使用 RGB 值、RGBA 值(包含透明度) 等方式來表示顏色。例如使用 RGB 值設置文本顏色為綠色:
<Text ????ohos:id="$+id:text_view" ????ohos:text="綠色文本" ????ohos:text_color="rgb(0, 255, 0)" ???... /> |
背景顏色:設置文本組件的背景顏色,需要借助background_element屬性,并結合ShapeElement來實現 。首先在resources/base/graphic目錄下創建一個xml文件,例如bg_rectangle.xml,定義背景形狀和顏色:
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ????ohos:shape="rectangle"> ????<solid ohos:color="#EFEFEF" /> </shape> |
然后在布局文件中應用這個背景:
<Text ????ohos:id="$+id:text_view" ????ohos:text="帶有灰色背景的文本" ????ohos:background_element="$graphic:bg_rectangle" ???... /> |
(三)對齊方式屬性
通過text_alignment屬性可以設置文本的對齊方式,包括水平和垂直方向 。在水平方向上,取值有left(左對齊)、right(右對齊)、horizontal_center(水平居中對齊)、start(起始端對齊,與left類似,在從左到右排版時表現相同)、end(結尾端對齊,與right類似,在從左到右排版時表現相同) 。例如設置文本右對齊:
<Text ????ohos:id="$+id:text_view" ????ohos:text="右對齊文本" ????ohos:text_alignment="right" ???... /> |
在垂直方向上,取值有top(頂部對齊)、bottom(底部對齊)、vertical_center(垂直居中對齊) 。例如設置文本垂直居中對齊:
<Text ????ohos:id="$+id:text_view" ????ohos:text="垂直居中對齊文本" ????ohos:text_alignment="vertical_center" ???... /> |
還可以將水平和垂直方向的對齊方式組合使用,比如設置文本既水平居中又垂直居中:
<Text ????ohos:id="$+id:text_view" ????ohos:text="居中對齊文本" ????ohos:text_alignment="center" ???... /> |
或者設置文本頂部左對齊:
<Text ????ohos:id="$+id:text_view" ????ohos:text="頂部左對齊文本" ????ohos:text_alignment="top left" ???... /> |
(四)其他實用屬性
文本截斷:當文本內容過長,超出文本組件的顯示范圍時,可通過truncation_mode屬性來處理。取值有none(無截斷,默認值,文本超長時全部顯示,可能導致文本溢出組件范圍)、ellipsis_at_start(在文本框起始處使用省略號截斷)、ellipsis_at_middle(在文本框中間位置使用省略號截斷)、ellipsis_at_end(在文本框結尾處使用省略號截斷)、auto_scrolling(文本超長時滾動顯示全部文本) 。在一個新聞應用中展示新聞標題時,如果標題過長,為了保證界面的整潔美觀,通常會在結尾處使用省略號截斷,設置如下:
<Text ????ohos:id="$+id:text_view" ????ohos:text="這是一個非常非常非常非常長的新聞標題,用于展示文本截斷效果" ????ohos:truncation_mode="ellipsis_at_end" ???... /> |
自動換行:設置自動換行通過multiple_lines屬性,將其值設置為true即可開啟自動換行 。同時,還可以結合max_text_lines屬性來限制文本顯示的最大行數。在一個小說閱讀應用中,展示小說內容時,希望文本自動換行,并且最多顯示 3 行,設置如下:
<Text ????ohos:id="$+id:text_view" ????ohos:text="這是一段小說內容,可能會很長,需要自動換行并且限制行數。這是一段小說內容,可能會很長,需要自動換行并且限制行數。這是一段小說內容,可能會很長,需要自動換行并且限制行數。" ????ohos:multiple_lines="true" ????ohos:max_text_lines="3" ???... /> |
文本裝飾:通過decoration屬性可以給文本添加裝飾線,如刪除線、下劃線等。該屬性包含type(裝飾線類型)和color(裝飾線顏色,可選)兩個參數 。在一個電商應用中,展示商品原價時,為了突出折扣,給原價添加刪除線,并設置刪除線顏色為紅色,設置如下:
<Text ????ohos:id="$+id:text_view" ????ohos:text="原價100元" ????ohos:decoration="{type: TextDecorationType.LineThrough, color: Color.Red}" ???... /> |
要是只想添加下劃線,不設置顏色(默認顏色),則可以這樣設置:
<Text ????ohos:id="$+id:text_view" ????ohos:text="這是帶有下劃線的文本" ????ohos:decoration="{type: TextDecorationType.Underline}" ???... /> |
四、動態更新與交互效果實
(一)動態更新文本
數據綁定:在 HarmonyOS 中,數據綁定是實現文本動態更新的重要機制之一。它基于 MVVM(Model - View - ViewModel)架構模式,通過建立數據與視圖之間的雙向綁定關系,使得當數據發生變化時,與之綁定的視圖也能自動更新 。在一個天氣應用中,需要實時顯示當前的氣溫數據。首先定義一個數據模型類,例如WeatherModel:
public class WeatherModel { ????private String temperature; ????public WeatherModel(String temperature) { ????????this.temperature = temperature; ????} ????public String getTemperature() { ????????return temperature; ????} ????public void setTemperature(String temperature) { ????????this.temperature = temperature; ????} } |
然后在布局文件中創建一個 Text 組件,并使用數據綁定語法將其與數據模型中的temperature屬性綁定:
<Text ????ohos:id="$+id/temperature_text" ????ohos:text="{{viewModel.temperature}}" ??... /> |
在代碼中,通過DataBindingUtil將布局與數據模型進行綁定,并在需要更新數據時,直接修改數據模型中的屬性值,視圖會自動更新。例如:
public class MainAbilitySlice extends AbilitySlice { ????private WeatherModel viewModel; ????@Override ????public void onStart(Intent intent) { ????????super.onStart(intent); ????????// 初始化數據模型 ????????viewModel = new WeatherModel("25℃"); ????????// 獲取布局的綁定對象 ????????DataAbilityHelper helper = DataAbilityHelper.creator(this); ????????AbilitySliceDataBinding binding = DataBindingUtil.inflate(helper, ResourceTable.Layout_ability_main, null, false); ????????binding.setViewModel(viewModel); ????????setUIContent(binding.getRoot()); ????????// 模擬數據更新 ????????new Handler().postDelayed(() -> { ????????????viewModel.setTemperature("26℃"); ????????}, 3000); ????} } |
代碼更新:在代碼中通過方法調用動態改變文本內容也是一種常見的方式。當用戶在一個登錄界面中輸入用戶名和密碼后,點擊登錄按鈕,系統會根據登錄結果在界面上顯示相應的提示信息。在布局文件中定義一個 Text 組件用于顯示提示信息:
<Text ????ohos:id="$+id/login_result_text" ????ohos:text="請輸入用戶名和密碼" ??... /> |
在代碼中,通過獲取 Text 組件的實例,調用setText方法來更新文本內容。例如:
public class LoginAbilitySlice extends AbilitySlice { ????@Override ????public void onStart(Intent intent) { ????????super.onStart(intent); ????????setUIContent(ResourceTable.Layout_ability_login); ????????Button loginButton = (Button) findComponentById(ResourceTable.Id_login_button); ????????Text resultText = (Text) findComponentById(ResourceTable.Id_login_result_text); ????????loginButton.setClickedListener(new Component.ClickedListener() { ????????????@Override ????????????public void onClick(Component component) { ????????????????// 模擬登錄驗證邏輯 ????????????????boolean isLoginSuccess = performLogin(); ????????????????if (isLoginSuccess) { ????????????????????resultText.setText("登錄成功"); ????????????????} else { ????????????????????resultText.setText("用戶名或密碼錯誤,請重試"); ????????????????} ????????????} ????????}); ????} ????private boolean performLogin() { ????????// 實際的登錄驗證邏輯,這里簡單返回一個固定值 ????????return true; ????} } |
(二)交互效果實現
點擊事件:為文本組件添加點擊事件監聽器,能夠讓文本在被點擊時執行特定的操作。在一個新聞詳情頁面中,有一段文本是關于新聞來源的鏈接,當用戶點擊該文本時,希望能夠跳轉到新聞來源的網站。在布局文件中定義一個 Text 組件:
<Text ????ohos:id="$+id/news_source_text" ????ohos:text="來源:[具體新聞網站名稱]" ??... /> |
在代碼中,獲取 Text 組件的實例,并為其設置點擊事件監聽器。例如:
public class NewsDetailAbilitySlice extends AbilitySlice { ????@Override ????public void onStart(Intent intent) { ????????super.onStart(intent); ????????setUIContent(ResourceTable.Layout_ability_news_detail); ????????Text sourceText = (Text) findComponentById(ResourceTable.Id_news_source_text); ????????sourceText.setClickedListener(new Component.ClickedListener() { ????????????@Override ????????????public void onClick(Component component) { ????????????????// 處理點擊事件,跳轉到新聞來源網站 ????????????????Intent intent = new Intent(); ????????????????Operation operation = new Intent.OperationBuilder() ??????????????????????.withUri("https://[具體新聞網站地址]") ??????????????????????.build(); ????????????????intent.setOperation(operation); ????????????????startAbility(intent); ????????????} ????????}); ????} } |
長按事件:實現文本組件的長按事件,可以滿足一些特定的交互需求,比如彈出上下文菜單、復制文本等。在一個便簽應用中,長按便簽的文本內容,希望能夠彈出一個包含 “復制”“刪除” 等操作的菜單。在布局文件中定義一個 Text 組件用于顯示便簽內容:
<Text ????ohos:id="$+id/note_text" ????ohos:text="這是一條便簽內容" ??... /> |
在代碼中,獲取 Text 組件的實例,并為其設置長按事件監聽器。例如:
public class NoteAbilitySlice extends AbilitySlice { ????@Override ????public void onStart(Intent intent) { ????????super.onStart(intent); ????????setUIContent(ResourceTable.Layout_ability_note); ????????Text noteText = (Text) findComponentById(ResourceTable.Id_note_text); ????????noteText.setLongClickedListener(new Component.LongClickedListener() { ????????????@Override ????????????public boolean onLongClicked(Component component) { ????????????????// 處理長按事件,彈出上下文菜單 ????????????????showContextMenu(); ????????????????return true; ????????????} ????????}); ????} ????private void showContextMenu() { ????????// 實際的上下文菜單顯示邏輯,這里可以使用PopupMenu等組件實現 ????????ToastDialog toast = new ToastDialog(getContext()); ????????toast.setText("上下文菜單"); ????????toast.show(); ????} } |
觸摸反饋:為文本組件添加觸摸反饋效果,可以讓用戶在操作時獲得更直觀的視覺反饋,提升交互體驗。在 HarmonyOS 中,可以通過設置文本組件的background_element屬性,結合ShapeElement來實現觸摸反饋效果。在一個按鈕式的文本組件中,當用戶觸摸時,希望文本背景顏色變深,松開時恢復原狀。首先在resources/base/graphic目錄下創建一個xml文件,例如button_bg.xml,定義觸摸前后的背景形狀和顏色:
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ????ohos:shape="rectangle"> ????<solid ohos:color="#FFFFFF" /> ????<corners ohos:radius="4vp" /> ????<states> ????????<state ohos:state_pressed="true"> ????????????<solid ohos:color="#E0E0E0" /> ????????</state> ????</states> </shape> |
然后在布局文件中應用這個背景到文本組件:
<Text ????ohos:id="$+id/button_text" ????ohos:text="點擊我" ????ohos:background_element="$graphic:button_bg" ??... /> |
這樣,當用戶觸摸該文本組件時,背景顏色會變為#E0E0E0,松開時恢復為#FFFFFF,從而實現了觸摸反饋效果。
五、應用案例展示
為了讓大家更直觀地了解 HarmonyOS 文本組件的強大功能和實際應用效果,下面我們來看幾個具體的應用案例。
(一)資訊類應用
在一款知名的資訊類應用中,文本組件的運用十分巧妙。新聞標題使用了較大字號、加粗字體以及與背景形成鮮明對比的顏色,如黑色文本搭配白色背景,在列表中非常醒目,能迅速吸引用戶的注意力 。同時,通過text_alignment屬性設置為left,保證標題左對齊,符合用戶從左到右的閱讀習慣。新聞摘要則采用較小字號和相對柔和的顏色,與標題形成層次區分 。對于較長的摘要內容,應用了truncation_mode屬性設置為ellipsis_at_end,在顯示區域有限時,以省略號截斷,既展示了關鍵信息,又保持了界面的整潔。當用戶點擊新聞標題進入詳情頁后,正文內容根據不同的段落結構,設置了適當的行間距和縮進,通過multiple_lines屬性開啟自動換行,確保文本排版舒適,易于閱讀。
(二)金融類應用
在一款金融理財應用里,對于數字金額的顯示,文本組件的屬性設置尤為重要。賬戶余額、收益金額等關鍵數字,使用了較大且醒目的字體,如HwChinese-bold字體 ,并根據金額的正負,設置了不同的顏色,盈利金額顯示為綠色,虧損金額顯示為紅色,讓用戶一眼就能了解自己的財務狀況 。在交易記錄列表中,每筆交易的時間、金額、交易類型等信息,通過合理設置文本的對齊方式和顏色,實現了清晰的信息展示。交易時間左對齊,金額右對齊,交易類型居中顯示,不同類型的交易(如買入、賣出、轉賬等)使用不同的顏色標識,方便用戶快速區分和查看。此外,對于一些重要的提示信息,如風險提示、賬戶安全提醒等,采用了帶背景顏色的文本框展示,背景顏色通常為淺黃色或淡紅色,與普通文本形成明顯區別,引起用戶的重視。
(三)教育類應用
在一款在線教育應用中,文本組件在課程內容展示、互動環節等方面發揮了重要作用。課程標題和章節標題使用了較大的字體和不同的顏色來區分層級,如課程標題用藍色,章節標題用綠色 ,方便學生快速定位和了解課程結構。在知識點講解部分,對于重點內容,通過設置font_weight為bold加粗顯示,或添加下劃線裝飾,讓學生能夠快速抓住關鍵知識點 。在互動環節,如提問、討論區,用戶輸入的文本和回復的內容,通過不同的背景顏色和文本對齊方式進行區分,用戶自己輸入的文本背景色為淡灰色,左對齊顯示;回復的內容背景色為白色,右對齊顯示,使得交流內容清晰明了,提升了用戶的互動體驗。同時,在輸入框中,還利用hint屬性設置了提示文本,引導用戶正確輸入內容 。
六、總結與展望
HarmonyOS 的文本組件(Text)憑借豐富多樣的屬性,為開發者打造出了一個充滿創意與可能的文本展示空間。從字體的精挑細選,到顏色的巧妙搭配,再到對齊方式的精心布局,以及各種實用屬性的靈活運用,每一個細節都為文本在界面上的生動呈現提供了有力支持 。
在動態更新與交互效果方面,數據綁定和代碼更新兩種方式讓文本能夠實時響應數據變化,點擊事件、長按事件和觸摸反饋等交互效果的實現,則極大地增強了用戶與應用之間的互動性,為用戶帶來了更加流暢、有趣的使用體驗 。
隨著 HarmonyOS 的不斷發展和生態的日益完善,相信文本組件在未來的應用開發中會發揮更加重要的作用。其功能將不斷優化和拓展,以適應更多復雜的應用場景和用戶需求 。例如,在未來的智能穿戴設備應用中,可能會根據用戶的運動狀態、心率等生理數據,動態調整文本的顯示方式,如在運動時增大字體、改變顏色以提高可視性;在智能家居控制應用中,文本組件可能會與語音交互更加緊密結合,當用戶通過語音下達指令時,界面上的文本提示能夠及時更新,給予用戶準確的反饋 。
HarmonyOS 文本組件作為界面開發的重要基礎,為我們打開了一扇通往無限可能的大門,讓我們期待它在未來綻放出更加絢麗的光彩,為 HarmonyOS 應用的精彩呈現持續貢獻力量。