鴻蒙#2020征文-TV# 3.1.1 文本組件 - Text
https://harmonyos.51cto.com/#zz
文本組件是我們最常用的組件之一,它是用來在UI界面上顯示字符串。作為基本組件,有很多擴展,常見的有按鈕組件Button、文本編輯組件TextFiled、計時器組件TickTimer,它們都是Text組件的擴展(也稱為Text的子類)。
Text(文本組件)是Component類的子類之一,所以它能夠使用Component類的所有公開的屬性和方法(后面章節(jié)會詳細介紹該類),Text類自身也提供了一些特殊的屬性、方法、內部類和接口。
1、從源代碼入手
閱讀官方的Java API文檔看結構不是很清晰,所以我們在DevEco中查看源代碼。
- /**
- * 繼承Component類
- */
- public class Text extends Component {}
這里我們說一下如何查看類的繼承關系,由于DevEco是基于開源的社區(qū)版,它是沒有Diagrams功能的,我們可以使用第二種方法Navigate --> Type Hierarchy(或者F4)來查看關系圖。
我們可以點擊DevEco界面左側選項卡Structure查看類中詳細結構,我們可以看到Text自身提供了很多屬性和方法,同時也繼承父類的很多屬性和方法。

- /**
- * 默認構造函數(shù)
- * 用于使用默認屬性和樣式創(chuàng)建文本實例
- * @param context
- */
- public Text(Context context) {}
- /**
- * 提供了用于在XML解析后使用指定的屬性集合和默認樣式創(chuàng)建文本實例的構造函數(shù)
- * @param context
- * @param attrSet
- */
- public Text(Context context, AttrSet attrSet) {}
- /**
- * 提供了用于在XML解析后使用指定的屬性集和指定的樣式創(chuàng)建文本實例的構造函數(shù)
- * @param context
- * @param attrSet
- * @param styleName
- */
- public Text(Context context, AttrSet attrSet, String styleName) {}
我們在代碼中要給布局添加組件時,需要先創(chuàng)建組件對象。使用磨人的構造函數(shù)創(chuàng)建Text對象,后面兩種構造函數(shù)我們這里不做過多說明,這兩種是用于自定義組件時使用的,后面自定義組件小節(jié)中會詳細介紹,期待吧。
- //創(chuàng)建Text對象
- Text text = new Text(this);
我們可以在Structure中看到Text類有很多屬性,比如設置文本內容的text屬性、設置文本內容顏色的textColor屬性、設置文本內容字體大小的textSize屬性,及設置文本內容字體的font屬性等。也有繼承自父類的屬性,比如設置文本寬度的width屬性、設置文本高度的height屬性等。
- //1. 創(chuàng)建Text對象
- Text text = new Text(this);
- //2. 設置文本內容寬高
- text.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
- text.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
- //3. 設置顯示內容
- text.setText("我是在代碼創(chuàng)建的Text。");
- //4. 設置文字大小
- text.setTextSize(50, Text.TextSizeType.FP);
- //5. 設置文字顏色
- text.setTextColor(Color.BLUE);
- //6. 添加組件到布局中
- layout.addComponent(text);
我們可以啟動一下我們的模擬器,查看是不是在界面中顯示了我們設置的文本內容。
當然組件不僅僅是做顯示使用的,我們還可以在組件上添加監(jiān)聽事件,來實現(xiàn)交互效果,比如我們點擊界面中的文字內容,讓它顯示成其他的內容。
我們現(xiàn)在使用的是代碼中構建UI界面,當然官方也給我們提供了在XML中聲明布局,添加組件,在代碼中設置界面入口只需要指定它在內存中的地址。如果我們要對組件進行監(jiān)聽,需要指定其在內存中的地址,然后創(chuàng)建對象完成監(jiān)聽操作。
在resources --> base目錄下創(chuàng)建layout目錄(目錄下的文件就是布局資源),然后在該目錄下創(chuàng)建布局資源文件(后綴為.xml),然后在XML中聲明布局和組件。
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:orientation="vertical">
- ohos:id="$+id:text_helloworld"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:layout_alignment="horizontal_center"
- ohos:text="我是在XML中聲明的Text。"
- ohos:text_size="50"
- />
- //在AbilitySlice的onStart方法中設置界面入口,這里指定頁面在內存中的地址
- super.setUIContent(ResourceTable.Layout_ability_text_xml);
2、常用屬性和方法
到這里我們已經(jīng)對Text有了大致的了解,對兩種編寫布局的方式也有了大致的了解。Text有很多屬性和方法,我們在這里給大家列出常用的幾個屬性和方法。
Text常用屬性
Text常用方法
- ohos:id="$+id:text_helloworld"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="我是在XML中聲明的Text。"
- ohos:text_size="50fp"
- />
- ohos:id="$+id:text_auto_font_size"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="T"
- ohos:text_size="50fp"
- ohos:auto_font_size="true"/>
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="Text Font"
- ohos:text_size="50fp"
- ohos:text_font="serif"/>
- //2. 自動調整字體大小
- Text text_auto_font_size = (Text) findComponentById(ResourceTable.Id_text_auto_font_size);
- text_auto_font_size.setClickedListener(l -> {
- text_auto_font_size.append("T");
- });
聲明:碼字不易,轉載請注明出處,系列圖文僅供學習使用,不可用于商用。因轉載作品引發(fā)的知識產(chǎn)權或其他法律糾紛的,轉載人須自行承擔一切后果,與本人無關!
https://harmonyos.51cto.com/#zz