具体参考:华为官网学习地址
1、点击事件,界面跳转
对于一个按钮设置点击事件,跳转页面。但是onclick中,如果pages前边加上"/",就没法跳转。但是开发工具加上"/"才会给出提示。不知道是不是开发工具的bug。(也是因为自己对于路径这些的使用规则不太清楚。)代码如下:
Button('测试光标', { type: ButtonType.Capsule })
.width(200)
.height(50)
.backgroundColor(Color.Grey)
.fontColor(Color.Red)
.fontWeight(600)
.onClick(() => {
console.log("111111111111111111111111")
router.push({
url: 'pages/Listpage'
})
})
上述是方式一:
还有方式二:
2、界面跳转,携带参数
在第一个界面中,给button添加点击事件,携带参数,代码如下。
在第二个界面中,接收数据,代码如下。其中src获取到的就是上一个界面传递过来的值。
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State src: string = router.getParams()?.['src'];
// 页面刷新展示
...
}
3,返回上一个界面
返回上一个页面。
router.back();
返回到指定页面。也要注意"pages"前边没有"/"。
router.back({ url: 'pages/Index' });
返回上一个页面时候,是否弹出对话框提示,需调用代码:
router.enableBackPageAlert({
message: 'Message Info'
});
或者因版本不同,api不同,调用下方api
router.enableAlertBeforeBackPage({
message: '确定返回?'
});
但是,在点击事件中调用上代码,并直接调用关闭方法页面(如下代码)时候,不会弹出对话框。当注释关闭页面方法,点击系统三角返回按钮时候,可以弹出对话框。原因需要继续学习查找。
router.back();//关闭页面代码
4、返回上一个页面,并携带数据
类似于Android的intent携带数据,然后在上一个界面的onActivityResult方法中接收。
在第二个界面,调用关闭界面方法的代码:
router.back({
url: 'pages/Index',
params: {
srcBack: 'Second页面传来的数据',
}
})
在第一个界面,接收数据的代码
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State src: string = ''; //生命接收变量
onPageShow() {
this.src = router.getParams()?.['srcBack']; //接收传回来的数据
}
// 页面刷新展示
...
}
然后再界面控件中,显示获取到的数据,代码如下:
Text(this.srcBack)
.fontSize($r('app.float.text_size_one')) //获取的资源文件中,文字的大小
.fontWeight(800)
回显如下: