文字元件是我們最常用的元件之一，它是用來在UI介面上顯示字串。作為基本元件，有很多擴充套件，常見的有按鈕元件Button、文字編輯元件TextFiled、計時器元件TickTimer，它們都是Text元件的擴充套件（也稱為Text的子類）。

Text（文字元件）是Component類的子類之一，所以它能夠使用Component類的所有公開的屬性和方法（後面章節會詳細介紹該類），Text類自身也提供了一些特殊的屬性、方法、內部類和介面。

1、從原始碼入手

閱讀官方的Java API文件看結構不是很清晰，所以我們在DevEco中檢視原始碼。

/**
 * 繼承Component類
 */
public class Text extends Component {}
 

這裡我們說一下如何檢視類的繼承關係，由於DevEco是基於開源的社群版，它是沒有Diagrams功能的，我們可以使用第二種方法Navigate --> Type Hierarchy（或者F4）來檢視關係圖。

我們可以點選DevEco介面左側選項卡Structure檢視類中詳細結構，我們可以看到Text自身提供了很多屬性和方法，同時也繼承父類的很多屬性和方法。

/**
 * 預設建構函式
 *      用於使用預設屬性和樣式建立文字例項
 * @param context
 */
public Text(Context context) {}

/**
 * 提供了用於在XML解析後使用指定的屬性集合和預設樣式建立文字例項的建構函式
 * @param context
 * @param attrSet
 */
public Text(Context context, AttrSet attrSet) {}

/**
 * 提供了用於在XML解析後使用指定的屬性集和指定的樣式建立文字例項的建構函式
 * @param context
 * @param attrSet
 * @param styleName
 */
public Text(Context context, AttrSet attrSet, String styleName) {}
 

我們在程式碼中要給佈局新增元件時，需要先建立元件物件。使用磨人的建構函式建立Text物件，後面兩種建構函式我們這裡不做過多說明，這兩種是用於自定義元件時使用的，後面自定義元件小節中會詳細介紹，期待吧。

//建立Text物件
Text text = new Text(this);

我們可以在Structure中看到Text類有很多屬性，比如設定文字內容的text屬性、設定文字內容顏色的textColor屬性、設定文字內容字型大小的textSize屬性，及設定文字內容字型的font屬性等。也有繼承自父類的屬性，比如設定文字寬度的width屬性、設定文字高度的height屬性等。

//1. 建立Text物件
Text text = new Text(this);
//2. 設定文字內容寬高
text.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
text.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
//3. 設定顯示內容
text.setText("我是在程式碼建立的Text。");
//4. 設定文字大小
text.setTextSize(50, Text.TextSizeType.FP);
//5. 設定文字顏色
text.setTextColor(Color.BLUE);
//6. 新增元件到佈局中
layout.addComponent(text);
 

我們可以啟動一下我們的模擬器，檢視是不是在介面中顯示了我們設定的文字內容。

當然元件不僅僅是做顯示使用的，我們還可以在元件上新增監聽事件，來實現互動效果，比如我們點選介面中的文字內容，讓它顯示成其他的內容。

我們現在使用的是程式碼中構建UI介面，當然官方也給我們提供了在XML中宣告佈局，新增元件，在程式碼中設定介面入口只需要指定它在記憶體中的地址。如果我們要對元件進行監聽，需要指定其在記憶體中的地址，然後建立物件完成監聽操作。

在resources --> base目錄下建立layout目錄（目錄下的檔案就是佈局資源），然後在該目錄下建立佈局資原始檔（字尾為.xml），然後在XML中宣告佈局和元件。

<!--xml檔案-->
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        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"
        />

</DirectionalLayout>

 

//在AbilitySlice的onStart方法中設定介面入口，這裡指定頁面在記憶體中的地址
super.setUIContent(ResourceTable.Layout_ability_text_xml);

2、常用屬性和方法

到這裡我們已經對Text有了大致的瞭解，對兩種編寫佈局的方式也有了大致的瞭解。Text有很多屬性和方法，我們在這裡給大家列出常用的幾個屬性和方法。

<Text
    ohos:id="$+id:text_helloworld"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text="我是在XML中宣告的Text。"
    ohos:text_size="50fp"
    />

<Text
    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"/>

<Text
    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");
});

獲取原文資源包
作者：IT明
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社群https://harmonyos.51cto.com