如何在HarmonyOS NEXT中處理頁面間的資料傳遞？

威哥爱编程發表於2024-11-28

大家好，前兩天的Mate70的釋出，讓人熱血沸騰啊，不想錯過，自學的小夥伴一起啊，今天分享的學習筆記是關於頁面間資料偉遞的問題，在HarmonyOS NEXT 5.0 中，頁面間的資料傳遞可以有很多種方式，V 哥常用的是Navigation和router，一起來看一下：

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方法中，我們使用Column和Button元件建立了一個按鈕列表，每個按鈕顯示一個專案名稱。
    • 當按鈕被點選時，navigateToDetail方法被呼叫，它建立一個新的NavPathInfo物件，其中包含目標頁面的URI和要傳遞的引數（在這個例子中是專案的ID）。
    • 使用Navigation.push方法，我們將NavPathInfo物件傳遞給Navigation元件，從而導航到詳情頁面。

  2. DetailPage:

    • 在DetailPage中，我們使用@State裝飾器定義了一個id狀態變數，用於儲存從主頁面傳遞過來的ID。
    • 在aboutToAppear生命週期方法中，我們透過Navigation.getParams()獲取傳遞過來的引數，並將其賦值給id狀態變數。
    • 在build方法中，我們使用Column和Text元件顯示傳遞過來的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方法中，我們使用Column和Text元件建立了一個商品列表，每個商品項顯示商品名稱。
    • 當商品項被點選時，navigateToDetail方法被呼叫，它使用router.push方法將商品ID作為引數傳遞給商品詳情頁面。
    • router.push方法接受一個物件，其中包含目標頁面的URL和要傳遞的引數。

  2. ProductDetailPage:

    • 在ProductDetailPage中，我們使用@State裝飾器定義了一個id狀態變數，用於儲存從商品列表頁面傳遞過來的ID。
    • 在aboutToAppear生命週期方法中，我們透過router.getParams()獲取傳遞過來的引數，並將其賦值給id狀態變數。
    • 在build方法中，我們使用Column和Text元件顯示傳遞過來的ID。

使用router在頁面間傳遞引數，可以說是最最常用的方式了，透過這種方式，我們可以輕鬆地在應用的不同頁面之間共享資料。

最後

以上兩種方法都可以實現HarmonyOS NEXT中頁面間的資料傳遞。第一種方法透過Navigation元件實現，適用於元件導航的場景；第二種方法透過router物件實現，適用於基於URL的頁面跳轉場景。兄弟們，你們在鴻蒙原生應用中是如何處理頁面間的資料傳遞的呢，歡迎一起交流，關於威哥愛程式設計，自學路上我們一起向鴻蒙進發。

相關文章