鸿蒙HarmonyOS实战-ArkUI组件（页面路由）_arkui 怎么实现页面跳转

最新推荐文章于 2024-07-25 09:06:44 发布

程序员锋范

最新推荐文章于 2024-07-25 09:06:44 发布

阅读量856

点赞数 29

分类专栏： 2024年程序员学习文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/weixin_58134620/article/details/137634373

版权

2024年程序员学习专栏收录该内容

237 篇文章 0 订阅

订阅专栏

Row(){
Image($r(‘app.media.icon’))
.width(this.imageWidth)
}
.width(‘100%’)
.height(400)
.justifyContent(FlexAlign.Center)

Row(){
Text($r(‘app.string.width_label’))
.fontSize(20)
.fontWeight(FontWeight.Bold)

TextInput({text: this.imageWidth.toFixed(0)})
.width(150)
.backgroundColor(‘#FFF’)
.type(InputType.Number)
.onChange( value => {
this.imageWidth = parseInt(value)
})
}
.width(‘100%’)
.padding({left: 14, right: 14})
.justifyContent(FlexAlign.SpaceBetween)

Divider()
.width(‘91%’)

Row(){
Button(‘缩小’)
.width(80)
.fontSize(20)
.onClick(() => {
if(this.imageWidth >= 10){
this.imageWidth -= 10
}
})

Button(‘放大’)
.width(80)
.fontSize(20)
.onClick(() => {
if(this.imageWidth < 300){
this.imageWidth += 10
}
})

}
.width(‘100%’)
.margin({ top: 35, bottom: 35 })
.justifyContent(FlexAlign.SpaceEvenly)
Button(‘回到首页’)
.width(160)
.fontSize(20)
.onClick(() => {
router.back()
})

Slider({
min: 100,
max: 300,
value: this.imageWidth,
step: 10,
})
.width(‘100%’)
.blockColor(‘#36D’)
.trackThickness(5)
.showTips(true)
.onChange(value => {
this.imageWidth = value
})
}
.width(‘100%’)
.height(‘100%’)
}
}

在这里插入图片描述

☀️1.1.2 不保留主页在页面栈中，在返回时直接退出应用

登录页（Login）和个人中心页（Profile）的切换适用案例

1、登录页

☀️1.1.3 保留主页在页面栈中，以便返回时恢复状态

设置页（Setting）和一个主题切换页

1、设置页

// 在Setting页面中
function onJumpClick(): void {
router.pushUrl({
url: ‘pages/Theme’ // 目标url
}, router.RouterMode.Single, (err) => {
if (err) {
console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke pushUrl succeeded.’);
});
}

☀️1.1.4 保留主页在页面栈中，以便返回时恢复状态

搜索结果列表页（SearchResult）和一个搜索结果详情页（SearchDetail）

1、搜索结果列表页

// 在SearchResult页面中
function onJumpClick(): void {
router.replaceUrl({
url: ‘pages/SearchDetail’ // 目标url
}, router.RouterMode.Single, (err) => {
if (err) {
console.error(Invoke replaceUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke replaceUrl succeeded.’);})
}

🦋1.2 页面参数

☀️1.2.1 主页页面参数传递和获取

1、参数传递

class DataModelInfo {
age: number;
}

class DataModel {
id: number;
info: DataModelInfo;
}

function onJumpClick(): void {
// 在Home页面中
let paramsInfo: DataModel = {
id: 123,
info: {
age: 20
}
};

router.pushUrl({
url: ‘pages/Detail’, // 目标url
params: paramsInfo // 添加params属性，传递自定义参数
}, (err) => {
if (err) {
console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke pushUrl succeeded.’);
})
}

2、参数获取

const params = router.getParams(); // 获取传递过来的参数对象
const id = params[‘id’]; // 获取id属性的值
const age = params[‘info’].age; // 获取age属性的值

☀️1.2.1 返回页页面参数传递和获取

作用	详细描述
提高用户体验	页面返回可以让用户快速地返回到上一个页面，提高用户体验。
恢复上一个页面的状态	通过页面返回，应用程序可以恢复上一个页面的状态，避免用户需要重新输入信息和执行操作。
实现页面间的交互	页面返回可以实现页面间的数据交换和互相调用，实现更加丰富和复杂的功能。
具备安全性和可控性	页面返回可以保证用户在返回上一个页面时的安全性和可控性，避免出现非授权访问、数据泄露和越权等情况。
加强应用程序的导航功能	通过页面返回，应用程序可以更好地实现导航功能，帮助用户更加方便快速地找到所需的功能和信息。

1、参数传递

router.back({
url: ‘pages/Home’,
params: {
info: ‘来自Home页’
}
});

2、参数获取

onPageShow() {
const params = router.getParams(); // 获取传递过来的参数对象
const info = params[‘info’]; // 获取info属性的值
}

🦋1.3 页面返回前增加一个询问框

作用	详细描述
避免误操作	增加询问框可以防止用户误操作，按下返回键后无法恢复的情况。用户在点击确定前可以再次确认是否要返回上一个页面。
增强用户体验	增加询问框可以提醒用户当前的操作会带来什么影响，强调操作的重要性，从而提升用户的体验。用户也可以在询问框中选择“取消”按钮，继续留在当前页面进行操作。
提高安全性	增加询问框可以提高应用程序的安全性。以防止用户在返回前没有保存数据，或者是执行其他重要操作。询问框可以起到提醒和警示的作用，帮助用户避免风险。
增加用户选择权	增加询问框可以赋予用户更多的选择权。询问框中的选项可以让用户自由选择是否返回上一个页面，或者是继续留在当前页面进行操作。
强化应用程序整体设计	增加询问框可以加强应用程序的整体设计。合理的询问框可以为应用程序增加层次感和平衡感，使应用程序看上去更加成熟和专业。