基于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文档)