鸿蒙OS应用开发之——页面间跳转

一 概述
本文将创建两个页面，实现页面间跳转
第一个页面MainAbility，第二个页面SecondAbility
每个页面都有一个Text(显示页面内容)和Button(跳转按钮)
在MainAbility点击“下一页”按钮，跳转到SecondAbility
SecondAbility点击“返回”按钮，返回MainAbility
二 项目结构

三 编写第一个页面
3.1 页面组成
entry > src > main > resources > base > layout——>ability_main.xml
entry > src > main > java > com.example.harmonyosdemo> slice>MainAbilitySlice.java
entry > src > main > java > com.example.harmonyosdemo>MainAbility.java
3.2 页面内容
ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#ffffff">

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:text="第一个页面"
        ohos:text_color="#000000"
        ohos:text_size="32fp"/>

    <Button
        ohos:id="$+id:buttonNext"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_bottom="true"
        ohos:background_element="$graphic:background_button"
        ohos:bottom_margin="40vp"
        ohos:bottom_padding="8vp"
        ohos:center_in_parent="true"
        ohos:left_padding="70vp"
        ohos:right_padding="70vp"
        ohos:text="下一页"
        ohos:text_color="#ffffff"
        ohos:text_size="19fp"
        ohos:top_padding="8vp"
        />
</DependentLayout>

background_button.xml

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

MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Button button= (Button) findComponentById(ResourceTable.Id_buttonNext);
        if (button!=null){
            //为按钮设置点击回调
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    // 初始化要跳转的界面
                    AbilitySlice slice = new SecondAbilitySlice();
                    Intent secondIntent=new Intent();
                    // 跳转到 MainAbilitySlice2 界面
                    present(slice, intent);
                }
            });
        }
   }

四 编写第二个页面
4.1 页面组成
entry > src > main > resources > base > layout——>ability_second.xml
entry > src > main > java > com.example.harmonyosdemo> slice>SecondAbilitySlice.java
entry > src > main > java > com.example.harmonyosdemo>SecondAbility.java
4.2 页面内容
ability_second.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#ffffff">

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"
        ohos:text="第二个页面"
        ohos:text_color="#000000"
        ohos:text_size="32fp"/>

    <Button
        ohos:id="$+id:buttonReturn"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:align_parent_bottom="true"
        ohos:background_element="$graphic:background_button"
        ohos:bottom_margin="40vp"
        ohos:bottom_padding="8vp"
        ohos:center_in_parent="true"
        ohos:left_padding="70vp"
        ohos:right_padding="70vp"
        ohos:text="返回"
        ohos:text_color="#ffffff"
        ohos:text_size="19fp"
        ohos:top_padding="8vp"
        />

</DependentLayout>

SecondAbilitySlice.java

public class SecondAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 声明布局
        super.setUIContent(ResourceTable.Layout_ability_second);
        ((Button)findComponentById(ResourceTable.Id_buttonReturn)).setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                onBackPressed();
            }
        });
    }

五 效果展示