[HarmonyOS]——页面跳转（官方demo）

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

效果展示：

笔记本人辛苦整理，转载复制望加文章出处，并推荐【Star星屹程序设计】，谢谢配合