大家好，前两天的 Mate70 的发布，让人热血沸腾啊，不想错过，自学的小伙伴一起啊，今天分享的学习笔记是关于页面间数据伟递的问题，在 HarmonyOS NEXT 5.0 中，页面间的数据传递可以有很多种方式，V 哥常用的是 Navigation 和 router，一起来看一下：
Navigation 组件传递参数在 HarmonyOS NEXT 中，可以通过 Navigation 组件的 NavPathInfo 对象来实现页面间的数据传递。以下是具体的步骤和代码示例：
Step 1: 在发起页面构建 NavPathInfo 对象，并输入需要传递给目标页面的参数。
// 发起页 mainPage
let loginParam : LoginParam = new LoginParam();
// 构建pathInfo对象
let pathInfo : NavPathInfo = new NavPathInfo('loginPage', loginParam, (popInfo: PopInfo) => {
let loginParam : LoginParam = popInfo.info.param as LoginParam;
// 处理返回的数据
});
// 将参数传递到目标页
this.pageStack.pushDestination(pathInfo, true);
Step 2: 在目标页面通过 NavPathStack.getParamByIndex(0) 获取到发起页传递过来的参数。
@Component
export struct loginPageView {
@Consume('pageInfo') pageStack : NavPathStack;
aboutToAppear(): void {
this.loginParam = this.pageStack.getParamByIndex(0) as LoginParam;
}
// 使用loginParam进行后续操作
}
Step 3: 目标页通过 NavPathStack.pop 方法返回起始页，其 result 参数用来传递需要返回给起始页的对象。
@Component
export struct loginPageView {
@Consume('pageInfo') pageStack : NavPathStack;
// 页面构建的对象
private loginParam! : LoginParam;
...
build() {
NavDestination(){
...
Button('login').onClick( ent => {
// 将对象返回给起始页
this.pageStack.pop(this.loginParam, true)
})
}
}
}
业务场景案例演示
下面 V 哥通过一个简单的业务场景来演示如何使用 Navigation 组件在 HarmonyOS NEXT 中传递参数。我们来创建一个简单的应用，包含两个页面：一个主页面（HomePage）和一个详情页面（DetailPage）。用户在主页面点击一个列表项时，应用将传递该项的 ID 到详情页面，并在详情页面显示对应的信息。
首先，我们创建主页面，其中包含一个列表，每个列表项点击时都会传递其 ID 到详情页面。
import { Column, Text, Navigation, Button } from '@ohos.arkui';
import { NavPathInfo } from '@ohos.application';
@Component
struct HomePage {
private items: Array<{ id: number; name: string }> = [
{ id: 1, name: '刘备' },
{ id: 2, name: '关羽' },
{ id: 3, name: '张飞' },
];
build() {
Column() {
this.items.map((item) => {
return Column() {
Button(item.name)
.onClick(() => {
this.navigateToDetail(item.id);
});
};
});
}
}
private navigateToDetail(id: number): void {
const navInfo = new NavPathInfo({
uri: 'pages/detail/DetailPage',
params: { id },
});
Navigation.push(navInfo);
}
}
接下来，我们创建详情页面，它将接收从主页面传递过来的 ID，并显示相应的信息。
import { Column, Text } from '@ohos.arkui';
import { Navigation } from '@ohos.application';
@Component
struct DetailPage {
@State private id: number = 0;
aboutToAppear() {
this.id = Navigation.getParams().id;
}
build() {
Column() {
Text(`Detail Page for ID: ${this.id}`);
}
}
}
HomePage:
items 数组，包含一些示例数据。build 方法中，我们使用 Column 和 Button 组件创建了一个按钮列表，每个按钮显示一个项目名称。navigateToDetail 方法被调用，它创建一个新的 NavPathInfo 对象，其中包含目标页面的 URI 和要传递的参数（在这个例子中是项目的 ID）。Navigation.push 方法，我们将 NavPathInfo 对象传递给 Navigation 组件，从而导航到详情页面。DetailPage:
DetailPage 中，我们使用 @State 装饰器定义了一个 id 状态变量，用于存储从主页面传递过来的 ID。aboutToAppear 生命周期方法中，我们通过 Navigation.getParams() 获取传递过来的参数，并将其赋值给 id 状态变量。build 方法中，我们使用 Column 和 Text 组件显示传递过来的 ID。哈哈，通过这个案例展示了如何在 HarmonyOS NEXT 中使用 Navigation 组件在页面间传递参数。通过这种方式，可以轻松地在应用的不同页面之间共享数据。
router 传递参数除了 Navigation，咱们常用的另一种方式是通过 router 对象进行页面跳转和参数传递。来看一下具体的步骤和代码示例：
发起页面：
import { router } from '@kit.ArkUI';
// 准备跳转的参数
let paramsInfo: DataModel = {
id: 123456,
info: {
age: 18
}
};
// 执行跳转并传递参数
router.pushUrl({
url: 'pages/routertest/Page2',
params: paramsInfo
}, (err) => {
if (err) {
console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('Invoke pushUrl succeeded.');
});
目标页面：
import { router } from '@kit.ArkUI';
import { DataModel } from './DataModels'
@Entry
@Component
struct Page2 {
@State receivedParams: DataModel = {} as DataModel;
aboutToAppear() {
this.receivedParams = router.getParams() as DataModel;
console.info('Received params:', this.receivedParams);
}
build() {
Column() {
Text(`Received ID: ${this.receivedParams.id}`)
Text(`Received Age: ${this.receivedParams.info.age}`)
}
}
}
来看一个业务场景
假设我们有这样一个业务场景，一个包含两个页面的应用：一个商品列表页面（ProductListPage）和一个商品详情页面（ProductDetailPage）。用户在商品列表页面点击某个商品时，应用将传递该商品的 ID 到商品详情页面，并在详情页面显示对应的信息。
首先，我们创建商品列表页面，其中包含一个商品列表，每个列表项点击时都会传递其 ID 到商品详情页面。
import { Column, Text, router } from '@ohos.arkui';
@Component
struct ProductListPage {
private products: Array<{ id: number; name: string }> = [
{ id: 1, name: '苹果' },
{ id: 2, name: '百香果' },
{ id: 3, name: '香蕉' },
];
build() {
Column() {
this.products.map((product) => {
return Column() {
Text(product.name)
.width('100%')
.height(50)
.onClick(() => {
this.navigateToDetail(product.id);
});
};
});
}
}
private navigateToDetail(id: number): void {
router.push({
url: 'pages/productDetail/ProductDetailPage',
params: { id },
});
}
}
接下来，我们创建商品详情页面，它将接收从商品列表页面传递过来的 ID，并显示相应的信息。
import { Column, Text, router } from '@ohos.arkui';
@Component
struct ProductDetailPage {
@State private id: number = 0;
aboutToAppear() {
this.id = router.getParams().id;
}
build() {
Column() {
Text(`Product Detail for ID: ${this.id}`);
}
}
}
ProductListPage:
products 数组，包含一些示例商品数据。build 方法中，我们使用 Column 和 Text 组件创建了一个商品列表，每个商品项显示商品名称。navigateToDetail 方法被调用，它使用 router.push 方法将商品 ID 作为参数传递给商品详情页面。router.push 方法接受一个对象，其中包含目标页面的 URL 和要传递的参数。ProductDetailPage:
ProductDetailPage 中，我们使用 @State 装饰器定义了一个 id 状态变量，用于存储从商品列表页面传递过来的 ID。aboutToAppear 生命周期方法中，我们通过 router.getParams() 获取传递过来的参数，并将其赋值给 id 状态变量。build 方法中，我们使用 Column 和 Text 组件显示传递过来的 ID。使用 router 在页面间传递参数，可以说是最最常用的方式了，通过这种方式，我们可以轻松地在应用的不同页面之间共享数据。
以上两种方法都可以实现 HarmonyOS NEXT 中页面间的数据传递。第一种方法通过 Navigation 组件实现，适用于组件导航的场景；第二种方法通过 router 对象实现，适用于基于 URL 的页面跳转场景。兄弟们，你们在鸿蒙原生应用中是如何处理页面间的数据传递的呢，欢迎一起交流，关于威哥爱编程，自学路上我们一起向鸿蒙进发。
友情链接： 黑马模板网