鸿蒙开发基础-UIAbility内页面间的跳转

基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递。

创建两个页面

启动DevEco Studio，创建一个新工程。在工程pages目录中，选中Index.ets，点击鼠标右键 > Refactor > Rename，改名为IndexPage.ets。改名后，修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/IndexPage，修改后，启动应用会自动加载IndexPage页。

// EntryAbility.ets
onWindowStageCreate(windowStage: Window.WindowStage) {
  ...
  windowStage.loadContent('pages/IndexPage', (err, data) => {
    ...
  });
}
1
2
3
4
5
6
7

选中工程entry > src > main > ets > pages目录，点击鼠标右键 > New > Page，新建命名为SecondPage的page页。此时DevEco Studio会自动在工程目录entry > src > main > resources > base > profile > main_pages.json文件中添加pages/SecondPage。

// main_pages.json
{
  "src": [
    "pages/IndexPage",
    "pages/SecondPage"
  ]
}
1
2
3
4
5
6
7

所有创建的页面都需要在main_pages.json配置。通过DevEco Studio创建的页面会自动配置。若手动复制page文件到entry > src > main > ets > pages目录，则需要在main_pages.json文件中添加对应的页面路径。

页面跳转

从IndexPage页面跳转到SecondPage页面，并进行数据传递，需要如下几个步骤：

• 给两个页面导入router路由模块。
• 在IndexPage页面中给Button组件添加点击事件，使用router.pushUrl()方法将SecondPage页面路径添加到url中，params为自定义参数。
• SecondPage页面通过router.getParams()方法获取IndexPage页面传递过来的自定义参数。

IndexPage页面有一个Text文本和Button按钮，点击按钮跳转到下一个页面，并传递数据。

// IndexPage.ets
import router from '@ohos.router';
import CommonConstants from '../common/constants/CommonConstants';

@Entry
@Component
struct IndexPage {
  @State message: string = CommonConstants.INDEX_MESSAGE;

  build() {
    Row() {
      Column() {
        Text(this.message)
          ...
        Blank()
        Button($r('app.string.next'))
          ...
          .onClick(() => {
            router.pushUrl({
              url: CommonConstants.SECOND_URL,
              params: {
                src: CommonConstants.SECOND_SRC_MSG
              }
            }).catch((error: Error) => {
              ...
            });
          })
      }
      ...
    }
    ...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

SecondPage页面有两个Text文本，其中一个文本展示从IndexPage页面传递过来的数据。

// SecondPage.ets
import router from '@ohos.router';
import CommonConstants from '../common/constants/CommonConstants';

@Entry
@Component
struct SecondPage {
  @State message: string = CommonConstants.SECOND_MESSAGE;
  @State src: string = router.getParams()?.[CommonConstants.SECOND_SRC_PARAM];

  build() {
    Row() {
      Column() {
        Text(this.message)
          ...
        Text(this.src)
          ...
      }
      ...
    }
    ...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

页面返回

在SecondPage页面中，Button按钮添加onClick()事件，调用router.back()方法，实现返回上一页面的功能。

// SecondPage.ets
Button($r('app.string.back'))
  ...
  .onClick(() => {
    router.back();
  })
1
2
3
4
5
6

本文是对鸿蒙开发（ArkTS）基础中实现UIAbility内页面间的跳转；更多的鸿蒙开发知识可以前往主页查看，鸿蒙的技术还有很多，下面是一张（鸿蒙4.0略缩图）：

高清完整版路线图，可主页找我保存（附鸿蒙4.0文档）

最终效果图如图所示：