ArkUI ArkTS實現(xiàn)頁面跳轉(zhuǎn)以及參數(shù)傳遞

作者“堅果“，潤和軟件生態(tài)技術(shù)專家，InfoQ簽約作者，OpenHarmony布道師，潤和軟件KOL專家，CSDN博客專家，開源項目gin-vue-admin成員之一。

Ability概述

Ability是一種包含用戶界面的應(yīng)用組件，主要用于和用戶進行交互。Ability也是系統(tǒng)調(diào)度的單元，為應(yīng)用提供窗口在其中繪制界面。

每一個Ability實例，都對應(yīng)于一個最近任務(wù)列表中的任務(wù)。

一個應(yīng)用可以有一個Ability，也可以有多個Ability

Ability內(nèi)頁面的跳轉(zhuǎn)和數(shù)據(jù)傳遞

Ability的數(shù)據(jù)傳遞包括有Ability內(nèi)頁面的跳轉(zhuǎn)和數(shù)據(jù)傳遞、

打開DevEco Studio，選擇一個Empty Ability工程模板，創(chuàng)建一個工程，例如命名為MyApplication。

• 在src/main/ets/pages目錄下，會生成一個Index頁面。這也是基于Ability實現(xiàn)的應(yīng)用的入口頁面?？梢栽贗ndex頁面中根據(jù)業(yè)務(wù)需要實現(xiàn)入口頁面的功能。
• 在src/main/ets/pages目錄下，右鍵，新建一個SecondPage頁面，用于實現(xiàn)頁面間的跳轉(zhuǎn)和數(shù)據(jù)傳遞。

為了實現(xiàn)頁面的跳轉(zhuǎn)和數(shù)據(jù)傳遞，需要新建一個頁面。在原有Index頁面的基礎(chǔ)上，新建一個頁面，例如命名為SecondPage.ets。

頁面間的導(dǎo)航可以通過頁面路由router模塊來實現(xiàn)。頁面路由模塊根據(jù)頁面url找到目標(biāo)頁面，從而實現(xiàn)跳轉(zhuǎn)。通過頁面路由模塊，可以使用不同的url訪問不同的頁面，包括跳轉(zhuǎn)到Ability內(nèi)的指定頁面、用Ability內(nèi)的某個頁面替換當(dāng)前頁面、返回上一頁面或指定的頁面等。

目錄結(jié)構(gòu)

config.json中的配置

"pages": [

"pages/index",

"pages/SecondPage"

],

頁面跳轉(zhuǎn)和參數(shù)接收

在使用頁面路由之前，需要先導(dǎo)入router模塊，如下代碼所示。

import router from '@ohos.router';

頁面跳轉(zhuǎn)的幾種方式，根據(jù)需要選擇一種方式跳轉(zhuǎn)即可。

方式一：通過調(diào)用router.push()方法，跳轉(zhuǎn)到Ability內(nèi)的指定頁面。

說明：每調(diào)用一次router.push()方法，均會新建一個頁面。默認情況下，頁面棧數(shù)量會加1，頁面棧支持的最大頁面數(shù)量為32。

當(dāng)頁面棧數(shù)量較大或者超過32時，可以通過調(diào)用router.clear()方法清除頁面棧中的所有歷史頁面，僅保留當(dāng)前頁面作為棧頂頁面。

router.push({

url: "pages/SecondPage",

params: {

name: "我是index頁的數(shù)據(jù)"

}

})

方式二：通過調(diào)用router.replace()方法，跳轉(zhuǎn)到Ability內(nèi)的指定頁面。即使用新的頁面替換當(dāng)前頁面，并銷毀被替換的當(dāng)前頁面，頁面棧數(shù)量不變。

router.replace({

url: 'pages/Second',

params: {

name: "我是index頁的數(shù)據(jù)"

}

})

已經(jīng)實現(xiàn)了頁面的跳轉(zhuǎn)，接下來，在SecondPage頁面中如何進行自定義參數(shù)的接收呢？

通過調(diào)用router.getParams()方法獲取Index頁面?zhèn)鬟f過來的自定義參數(shù)。

import router from '@ohos.router';

@Entry

@Component

struct SecondPage {

@State name: string = router.getParams()?.['name'];

}

頁面返回和參數(shù)接收

經(jīng)常還會遇到一個場景，在SecondPage頁面中，完成了一些功能操作之后，希望能返回到Index頁面，那我們要如何實現(xiàn)呢？

在SecondPage頁面中，可以通過調(diào)用router.back()方法實現(xiàn)返回到上一個頁面，或者在調(diào)用router.back()方法的時增加可選的options參數(shù)（增加url參數(shù)）返回到指定頁面。

返回上一個頁面。

router.back()

返回到指定頁面。

router.back({ url: 'pages/index' })

說明：調(diào)用router.back()方法，不會新建頁面，返回的是原來的頁面，在原來頁面中@State聲明的變量不會重復(fù)聲明，以及也不會觸發(fā)頁面的aboutToAppear()生命周期回調(diào)，因此無法直接在變量聲明以及頁面的aboutToAppear()生命周期回調(diào)中接收和解析router.back()傳遞過來的自定義參數(shù)。這里我在onPageShow()生命周期中實現(xiàn)了回傳值的接收。

完整代碼

Index

import router from '@ohos.router';

@Entry

@Component

struct Index {

@State message: string = '堅果'

onPageShow(): void {

if (router.getParams() != null) {

this.message = router.getParams()?.['name'];

}

}

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold).onClick(() => {

router.push({

url: "pages/SecondPage",

params: {

name: "我是index頁的數(shù)據(jù)"

}

})

})

}

.width('100%')

}

.height('100%')

}

}

SecondPage

import router from '@ohos.router';

@Entry

@Component

struct SecondPage {

@State message: string = '我是Second頁'

@State name: string = router.getParams()?.['name'];

build() {

Row() {

Column() {

Text(this.message)

.fontSize(50)

.fontWeight(FontWeight.Bold)

.onClick(() => {

router.back({

url: "pages/index",

params: {

name: "我是要回傳的值"

}

})

})

Text(this.name)

.fontSize(50)

.fontWeight(FontWeight.Bold)

}

.width('100%')

}

.height('100%')

}

}s

原文地址：https://developer.huawei.com/consumer/cn/blog/topic/03104943938643053