电子说
基于Stage模型下的Ability开发,实现Ability内页面间的跳转和数据传递。
最终效果图如下:
完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:
gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]本篇Codelab只对核心代码进行讲解,完整代码可以直接从gitee获取。
├──entry/src/main/ets // 代码区
│ ├──common
│ │ ├──constants
│ │ │ └──CommonConstants.ets // 公共常量类
│ │ └──utils
│ │ └──Logger.ets // 日志类
│ ├──entryability
│ │ └──EntryAbility.ets // 程序入口类
│ └──pages
│ ├──IndexPage.ets // 入口页面
│ └──SecondPage.ets // 跳转页
└──entry/src/main/resources // 资源文件目录
`HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`
在工程pages目录中,选中Index.ets,点击鼠标右键 > Refactor > Rename,改名为IndexPage.ets。改名后,修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/IndexPage。
// EntryAbility.ets
onWindowStageCreate(windowStage: Window.WindowStage): void {
...
windowStage.loadContent('pages/IndexPage', (err, data) = > {
...
});
}
在工程pages目录中,点击鼠标右键 > New > Page,新建命名为SecondPage的page页。
从IndexPage页面跳转到SecondPage页面,并进行数据传递,需要如下几个步骤:
IndexPage页面有一个Text文本和Button按钮,点击按钮跳转到下一个页面,并传递数据。IndexPage.ets代码如下:
// 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) = > {
Logger.info(TAG, 'IndexPage push error' + JSON.stringify(error));
});
})
}
...
}
...
}
}
SecondPage页面有两个Text文本,其中一个文本展示从IndexPage页面传递过来的数据。SecondPage.ets代码如下:
// SecondPage.ets
import router from '@ohos.router';
import CommonConstants from '../common/constants/CommonConstants';
@Entry
@Component
struct Second {
@State message: string = CommonConstants.SECOND_MESSAGE;
@State src: string = (router.getParams() as Record< string, string >)[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();
})
审核编辑 黄宇
全部0条评论
快来发表一下你的评论吧 !