UIAbility内页面间的跳转

介绍

本篇Codelab基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递，最终效果图如图所示：

相关概念

• 页面路由：提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

完整示例

gitee源码地址

源码下载

UIAbility内页面间的跳转（ArkTS）.zip

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载或gitee中提供。

├──entry/src/main/ets                // ArkTS代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets      // 公共常量类
│  │  └──utils
│  │     └──Logger.ets               // 日志工具类
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口类
│  └──pages
│     ├──IndexPage.ets               // 入口页面
│     └──SecondPage.ets              // 跳转页
└──entry/src/main/resources	     // 资源文件目录

创建两个页面

启动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) => {
    ...
  });
}

选中工程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"
  ]
}

所有创建的页面都需要在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) => {
              ...
            });
          })
      }
      ...
    }
    ...
  }
}

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

页面返回

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

// SecondPage.ets
Button($r('app.string.back'))
  ...
  .onClick(() => {
    router.back();
  })