如何在HarmonyOS NEXT中处理页面间的数据传递?

原创
11/28 10:33
阅读数 455
AI总结

大家好,前两天的Mate70的发布,让人热血沸腾啊,不想错过,自学的小伙伴一起啊,今天分享的学习笔记是关于页面间数据伟递的问题,在HarmonyOS NEXT 5.0 中,页面间的数据传递可以有很多种方式,V 哥常用的是Navigationrouter,一起来看一下:

1. 使用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到详情页面,并在详情页面显示对应的信息。

1. 主页面(HomePage.ets)

首先,我们创建主页面,其中包含一个列表,每个列表项点击时都会传递其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);
  }
}

2. 详情页面(DetailPage.ets)

接下来,我们创建详情页面,它将接收从主页面传递过来的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}`);
    }
  }
}

代码解释

  1. HomePage:

    • 我们定义了一个items数组,包含一些示例数据。
    • build方法中,我们使用ColumnButton组件创建了一个按钮列表,每个按钮显示一个项目名称。
    • 当按钮被点击时,navigateToDetail方法被调用,它创建一个新的NavPathInfo对象,其中包含目标页面的URI和要传递的参数(在这个例子中是项目的ID)。
    • 使用Navigation.push方法,我们将NavPathInfo对象传递给Navigation组件,从而导航到详情页面。
  2. DetailPage:

    • DetailPage中,我们使用@State装饰器定义了一个id状态变量,用于存储从主页面传递过来的ID。
    • aboutToAppear生命周期方法中,我们通过Navigation.getParams()获取传递过来的参数,并将其赋值给id状态变量。
    • build方法中,我们使用ColumnText组件显示传递过来的ID。

哈哈,通过这个案例展示了如何在HarmonyOS NEXT中使用Navigation组件在页面间传递参数。通过这种方式,可以轻松地在应用的不同页面之间共享数据。

2. 使用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到商品详情页面,并在详情页面显示对应的信息。

1. 商品列表页面(ProductListPage.ets)

首先,我们创建商品列表页面,其中包含一个商品列表,每个列表项点击时都会传递其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 },
    });
  }
}

2. 商品详情页面(ProductDetailPage.ets)

接下来,我们创建商品详情页面,它将接收从商品列表页面传递过来的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}`);
    }
  }
}

代码解释

  1. ProductListPage:

    • 我们定义了一个products数组,包含一些示例商品数据。
    • build方法中,我们使用ColumnText组件创建了一个商品列表,每个商品项显示商品名称。
    • 当商品项被点击时,navigateToDetail方法被调用,它使用router.push方法将商品ID作为参数传递给商品详情页面。
    • router.push方法接受一个对象,其中包含目标页面的URL和要传递的参数。
  2. ProductDetailPage:

    • ProductDetailPage中,我们使用@State装饰器定义了一个id状态变量,用于存储从商品列表页面传递过来的ID。
    • aboutToAppear生命周期方法中,我们通过router.getParams()获取传递过来的参数,并将其赋值给id状态变量。
    • build方法中,我们使用ColumnText组件显示传递过来的ID。

使用router在页面间传递参数,可以说是最最常用的方式了,通过这种方式,我们可以轻松地在应用的不同页面之间共享数据。

最后

以上两种方法都可以实现HarmonyOS NEXT中页面间的数据传递。第一种方法通过Navigation组件实现,适用于组件导航的场景;第二种方法通过router对象实现,适用于基于URL的页面跳转场景。兄弟们,你们在鸿蒙原生应用中是如何处理页面间的数据传递的呢,欢迎一起交流,关于威哥爱编程,自学路上我们一起向鸿蒙进发。

展开阅读全文
加载中
点击加入讨论🔥(1) 发布并加入讨论🔥
1 评论
0 收藏
0
分享
AI总结
返回顶部
顶部