如安在HarmonyOS NEXT中处置惩罚页面间的数据传递？

大家好，前两天的Mate70的发布，让人热血沸腾啊，不想错过，自学的小伙伴一起啊，本日分享的学习条记是关于页面间数据伟递的题目，在HarmonyOS NEXT 5.0 中，页面间的数据传递可以有很多种方式，V 哥常用的是Navigation和router，一起来看一下：
1. 使用Navigation组件传递参数

在HarmonyOS NEXT中，可以通过Navigation组件的NavPathInfo对象来实现页面间的数据传递。以下是具体的步调和代码示例：
Step 1: 在发起页面构建NavPathInfo对象，并输入需要传递给目标页面的参数。

1. // 发起页 mainPage
2. let loginParam : LoginParam = new LoginParam();
3. // 构建pathInfo对象
4. let pathInfo : NavPathInfo = new NavPathInfo('loginPage', loginParam, (popInfo: PopInfo) => {
5.   let loginParam : LoginParam = popInfo.info.param as LoginParam;
6.   // 处理返回的数据
7. });
8. // 将参数传递到目标页
9. this.pageStack.pushDestination(pathInfo, true);

复制代码

Step 2: 在目标页面通过NavPathStack.getParamByIndex(0)获取到发起页传递过来的参数。

1. @Component
2. export struct loginPageView {
3.   @Consume('pageInfo') pageStack : NavPathStack;
4.   aboutToAppear(): void {
5.     this.loginParam = this.pageStack.getParamByIndex(0) as LoginParam;
6.   }
7.   // 使用loginParam进行后续操作
8. }

复制代码

Step 3: 目标页通过NavPathStack.pop方法返回起始页，其result参数用来传递需要返回给起始页的对象。

1. @Component
2. export struct loginPageView {
3.   @Consume('pageInfo') pageStack : NavPathStack;
4.   // 页面构建的对象
5.   private loginParam! : LoginParam;
6.   ...
7.   build() {
8.     NavDestination(){
9.       ...
10.       Button('login').onClick( ent => {
11.         // 将对象返回给起始页
12.         this.pageStack.pop(this.loginParam, true)
13.       })
14.     }
15.   }
16. }

复制代码

业务场景案例演示
下面 V 哥通过一个简单的业务场景来演示如何使用Navigation组件在HarmonyOS NEXT中传递参数。我们来创建一个简单的应用，包含两个页面：一个主页面（HomePage）和一个详情页面（DetailPage）。用户在主页面点击一个列表项时，应用将传递该项的ID到详情页面，并在详情页面表现对应的信息。
1. 主页面（HomePage.ets）

首先，我们创建主页面，此中包含一个列表，每个列表项点击时都会传递其ID到详情页面。

1. import { Column, Text, Navigation, Button } from '@ohos.arkui';
2. import { NavPathInfo } from '@ohos.application';
4. @Component
5. struct HomePage {
6.   private items: Array<{ id: number; name: string }> = [
7.     { id: 1, name: '刘备' },
8.     { id: 2, name: '关羽' },
9.     { id: 3, name: '张飞' },
10.   ];
12.   build() {
13.     Column() {
14.       this.items.map((item) => {
15.         return Column() {
16.           Button(item.name)
17.             .onClick(() => {
18.               this.navigateToDetail(item.id);
19.             });
20.         };
21.       });
22.     }
23.   }
25.   private navigateToDetail(id: number): void {
26.     const navInfo = new NavPathInfo({
27.       uri: 'pages/detail/DetailPage',
28.       params: { id },
29.     });
30.     Navigation.push(navInfo);
31.   }
32. }

复制代码

2. 详情页面（DetailPage.ets）

接下来，我们创建详情页面，它将接收从主页面传递过来的ID，并表现相应的信息。

1. import { Column, Text } from '@ohos.arkui';
2. import { Navigation } from '@ohos.application';
4. @Component
5. struct DetailPage {
6.   @State private id: number = 0;
8.   aboutToAppear() {
9.     this.id = Navigation.getParams().id;
10.   }
12.   build() {
13.     Column() {
14.       Text(`Detail Page for ID: ${this.id}`);
15.     }
16.   }
17. }

复制代码

代码解释

• 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组件在页面间传递参数。通过这种方式，可以轻松地在应用的差别页面之间共享数据。
2. 使用router传递参数

除了Navigation，咱们常用的另一种方式是通过router对象进行页面跳转和参数传递。来看一下具体的步调和代码示例：
发起页面：

1. import { router } from '@kit.ArkUI';
2. // 准备跳转的参数
3. let paramsInfo: DataModel = {
4.   id: 123456,
5.   info: {
6.     age: 18
7.   }
8. };
9. // 执行跳转并传递参数
10. router.pushUrl({
11.   url: 'pages/routertest/Page2',
12.   params: paramsInfo
13. }, (err) => {
14.   if (err) {
15.     console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
16.     return;
17.   }
18.   console.info('Invoke pushUrl succeeded.');
19. });

复制代码

目标页面：

1. import { router } from '@kit.ArkUI';
2. import { DataModel } from './DataModels'
4. @Entry
5. @Component
6. struct Page2 {
7.   @State receivedParams: DataModel = {} as DataModel;
9.   aboutToAppear() {
10.     this.receivedParams = router.getParams() as DataModel;
11.     console.info('Received params:', this.receivedParams);
12.   }
13.   
14.   build() {
15.     Column() {
16.       Text(`Received ID: ${this.receivedParams.id}`)
17.       Text(`Received Age: ${this.receivedParams.info.age}`)
18.     }
19.   }
20. }

复制代码

来看一个业务场景
假设我们有如许一个业务场景，一个包含两个页面的应用：一个商品列表页面（ProductListPage）和一个商品详情页面（ProductDetailPage）。用户在商品列表页面点击某个商品时，应用将传递该商品的ID到商品详情页面，并在详情页面表现对应的信息。
1. 商品列表页面（ProductListPage.ets）

首先，我们创建商品列表页面，此中包含一个商品列表，每个列表项点击时都会传递其ID到商品详情页面。

1. import { Column, Text, router } from '@ohos.arkui';
3. @Component
4. struct ProductListPage {
5.   private products: Array<{ id: number; name: string }> = [
6.     { id: 1, name: '苹果' },
7.     { id: 2, name: '百香果' },
8.     { id: 3, name: '香蕉' },
9.   ];
11.   build() {
12.     Column() {
13.       this.products.map((product) => {
14.         return Column() {
15.           Text(product.name)
16.             .width('100%')
17.             .height(50)
18.             .onClick(() => {
19.               this.navigateToDetail(product.id);
20.             });
21.         };
22.       });
23.     }
24.   }
26.   private navigateToDetail(id: number): void {
27.     router.push({
28.       url: 'pages/productDetail/ProductDetailPage',
29.       params: { id },
30.     });
31.   }
32. }

复制代码

2. 商品详情页面（ProductDetailPage.ets）

接下来，我们创建商品详情页面，它将接收从商品列表页面传递过来的ID，并表现相应的信息。

1. import { Column, Text, router } from '@ohos.arkui';
3. @Component
4. struct ProductDetailPage {
5.   @State private id: number = 0;
7.   aboutToAppear() {
8.     this.id = router.getParams().id;
9.   }
11.   build() {
12.     Column() {
13.       Text(`Product Detail for ID: ${this.id}`);
14.     }
15.   }
16. }

复制代码

代码解释

• 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的页面跳转场景。兄弟们，你们在鸿蒙原生应用中是如何处置惩罚页面间的数据传递的呢，接待一起交流，关于威哥爱编程，自学路上我们一起向鸿蒙进发。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。