1、案例步驟明確：

1. 撰寫第一個頁面（文本 + 按鈕）
2. 撰寫第二個頁面（文本）
3. 給按鈕添加一個跳轉

在鴻蒙UI中，提供了兩種撰寫布局的方式：

注意：創建新的Ability

點擊包，右鍵新建Ability，創建后開發工具會幫助我們生成一個新Ability需要的所有東西，包括子AbilitySlice、組態檔中相關配置（config.json內）都處理好了

2、布局物件介紹

（1）使用XML方式

使用XML方式的時候，所有的標簽都包含在 DirectionalLayout 中，它就是一個布局標簽，默認該標簽的布局規則是從上到下

（2）Java方式

在Java代碼書寫方式中，布局物件類也叫作：DirectionalLayout

（3）頁面書寫

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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="第一個頁面！！！"
        ohos:text_size="40vp"
        />
    <!-- match_content表示長寬適應內容調整 -->
    <Button
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="red"
        ohos:text_size="40fp"
        ohos:text="點擊我"
        />

</DirectionalLayout>

Java方式書寫第二個界面：

public class SecondAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //使用XML檔案定義方式
        //super.setUIContent(ResourceTable.Layout_ability_second);

        //使用Java代碼的方式定義內容檔案
        //1、創建一個布局物件（布局物件規定內容的布局方式）
        //this代表布局物件放在當前界面中
        DirectionalLayout dl = new DirectionalLayout(this);

        //2、創建文本物件
        Text text = new Text(this);
        //設定文本內容
        text.setText("第二個頁面");
        //設定文字大小
        text.setTextSize(55);
        //設定文字顏色
        text.setTextColor(Color.BLUE);

        //3、把文字物件添加到界面當中
        dl.addComponent(text);

        //4、把布局添加到界面當中
        super.setUIContent(dl);

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

3、頁面跳轉

定義按鈕點擊事件時，需要實作 Component.ClickedListener 介面，實作它的所有方法，也即 onClick方法，定義需要做的事情，

public void setClickedListener(Component.ClickedListener listener) {
    throw new RuntimeException("Stub!");
}

如上所示：setClickedListener需要傳入一個Component.ClickedListener物件，在Studio中追到該物件定義處發現它是一個介面，所以需要實作該介面，我在本類（MainAbilitySlice）中實作該介面，也即本類就是此介面的一個實作類了，所以在setClickedListener函式傳參是就可以傳入this代表本類，

package com.example.helloworld.slice;

import com.example.helloworld.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    public Button button;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //1、找到按鈕 id
        button = (Button) findComponentById(ResourceTable.Id_but1);

        //2、給按鈕添加一個點擊事件
        //如果沒有給按鈕添加點擊事件，那么用滑鼠點擊是沒有任何反應的
        //如果我們給按鈕添加了點擊事件，那么用滑鼠點擊按鈕之后就可以執行對應的代碼
        //理解方式：給button按鈕添加了點擊事件，點擊了button按鈕后，就可以執行本類的onClick方法
        button.setClickedListener(this);
    }

    //繼承了ClickedListener，就需要實作她所有的方法
    @Override
    public void onClick(Component component) {
        if(component == button) {
            //只有點擊了button這個按鈕后，才進行跳轉

            //跳轉到哪個頁面中（意圖）
            Intent i = new Intent();
            //包含了要跳轉的頁面資訊
            //要跳轉到哪個設備，如果傳遞一個沒有內容的字串，表示跳轉本機
            Operation operation = new Intent.OperationBuilder()
                    .withDeviceId("")
                    .withBundleName("com.example.helloworld") //要跳轉到哪個應用上，小括號可以寫包名
                    .withAbilityName("com.example.helloworld.SecondAbility") //要跳轉的頁面
                    .build(); // 表示將上面的三個資訊進行打包

            //把打包之后的operation的設定寫到意圖中
            i.setOperation(operation);
            //跳轉頁面
            startAbility(i);
        }
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

效果展示：