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

2024-01-09 18:31:39

基于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) => {
    ...
  });
}

选中工程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();
  })

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

高清完整版路线图,可主页找我保存(附鸿蒙4.0文档)

最终效果图如图所示:

文章来源:https://blog.csdn.net/m0_62167422/article/details/135483260
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。