鴻蒙App開發之Text

從2021年6月2號開始，鴻蒙系統已經完全開源，

目前學習鴻蒙開發正當其時，如果你之前學習過Android開發，那么鴻蒙完全可以直接上手，

不過，博主寫的鴻蒙開發課程任何人都可以學習，因為都是從基礎的組件開始講解，下面，博主將從Text組件入門，來一步步講解鴻蒙開發的要點，

Text組件

Text是用來顯示字串的組件，在界面上顯示為一塊文本區域，示例代碼如下所示：

<Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:background_element="$graphic:background_ability_main"
        ohos:padding="10vp"
        ohos:text_font="serif"
        ohos:text="$string:HelloWorld"
        ohos:element_left="$media:icon"
        ohos:text_size="50vp"/>

這里，是通過XML布局檔案來創建Text文本組件，

運行之后，效果如下：

當然，Text組件還有很多其他的屬性，相對來說用的比較少，比如max_text_lines文本最大行，這些在后面的組件講解，

通過代碼操作Text組件

上面，我們都是通過XML布局檔案進行Text組件的設定以及操作，但是其第一個屬性就是id，通過它我們可以在代碼中對Text組件做更多的事情，

示例如下：

public class MainAbilitySlice extends AbilitySlice {
    private Text hw_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.hw_text=(Text)findComponentById(ResourceTable.Id_text_helloworld);
        this.hw_text.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(hw_text.getText().equals("Hello World")){
                    hw_text.setText("Harmony OS");
                }else{
                    hw_text.setText("Hello World");
                }
            }
        });
    }
}

這里，我們給Text組件設定了點擊事件，當Text組件文本為Hello World時，替換為Harmony OS，當Text組件文本不是Hello World時，替換為Hello World，

簡單的理解，就是“Harmony OS”與“Hello World”兩個文本點擊后相互替換，

使用Text組件實作跑馬燈效果

在眾多的開發中，講解文本組件時，都會介紹其跑馬燈效果的實作，那么博主講解鴻蒙也不例外，我們來實作鴻蒙系統文本組件的跑馬燈效果，

示例如下：

public class MainAbilitySlice extends AbilitySlice {
    private Text hw_text;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.hw_text=(Text)findComponentById(ResourceTable.Id_text_helloworld);
        this.hw_text.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                if(hw_text.getText().equals("Hello World")){
                    hw_text.setText("Harmony OS");
                }else{
                    hw_text.setText("Hello World");
                }
            }
        });
        // 跑馬燈效果
        this.hw_text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
        // 始終處于自動滾動狀態
        this.hw_text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
        // 啟動跑馬燈效果
        this.hw_text.startAutoScrolling();
    }
}

這里，我們只需要增加三行即可，

但是如果直接運行的話，肯定沒有效果，因為文本的寬度是自適應內容寬度，而跑馬燈之所以能夠實作，是因為其寬度小于文本寬度，

所以，我們需要改變文本的寬度，將其設定為固定的大小，且小于文本字串，XML修改代碼如下：

ohos:width="175vp"

運行之后，效果如首圖所示，

資源檔案參考內容：

graphic:background_ability_main：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="50"/>
    <solid
        ohos:color="#FF0000"/>
</shape>

string:HelloWorld：

{
  "string": [
    {
      "name": "app_name",
      "value": "鴻蒙組件"
    },
    {
      "name": "mainability_description",
      "value": "Java_Phone_Empty Feature Ability"
    },
    {
      "name": "HelloWorld",
      "value": "Hello World"
    }
  ]
}