鴻蒙HarmonyOS實戰-ArkUI元件（頁面路由）

蜀道山QAQ發表於2024-04-12

鴻蒙UI元件路由

🚀一、路由導航

路由導航是指在應用程式中透過路徑導航定位到特定頁面的過程。路由導航的實現通常採用路由器（router）來進行管理，路由器根據路徑的不同值將使用者請求導向到不同的頁面。

在HarmonyOS中路由導航主要有：頁面跳轉、頁面返回和頁面返回前增加一個詢問框

🔎1.程式設計路由

🦋1.1 頁面跳轉

頁面跳轉相關作用：

Router模組提供了兩種跳轉模式： router.pushUrl() 和 router.replaceUrl()。router.pushUrl() 可以透過返回鍵或者呼叫router.back()方法返回到當前頁：

Router模組提供了兩種例項模式： Standard 和 Single：

☀️1.1.1 保留主頁在頁面棧中，以便返回時恢復狀態

主頁（Home）和詳情頁（Detail）

1、主頁

import router from '@ohos.router';
// 在Home頁面中
function onJumpClick(): void {
  router.pushUrl({
    url: 'pages/ImagePage' // 目標url
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  });
}
@Entry
@Component
struct Index {
  build() {
    Row() {
      Button('跳轉到圖片頁面')
        .onClick(e=>{
          onJumpClick()
        })
    }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).backgroundColor(0xffd306).height('100%').width('100%')
  }
}

2、詳情頁

import router from '@ohos.router';
@Entry //FA模式必須有這個
@Component
struct Index {
  @State imageWidth: number = 150

  build() {
    Column() {
      Row(){
        Image($r('app.media.icon'))
          .width(this.imageWidth)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)

      Row(){
        Text($r('app.string.width_label'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        TextInput({text: this.imageWidth.toFixed(0)})
          .width(150)
          .backgroundColor('#FFF')
          .type(InputType.Number)
          .onChange( value => {
            this.imageWidth = parseInt(value)
          })
      }
      .width('100%')
      .padding({left: 14, right: 14})
      .justifyContent(FlexAlign.SpaceBetween)

      Divider()
        .width('91%')

      Row(){
        Button('縮小')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if(this.imageWidth >= 10){
              this.imageWidth -= 10
            }
          })

        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(() => {
            if(this.imageWidth < 300){
              this.imageWidth += 10
            }
          })

      }
      .width('100%')
      .margin({ top: 35, bottom: 35 })
      .justifyContent(FlexAlign.SpaceEvenly)
      Button('回到首頁')
        .width(160)
        .fontSize(20)
        .onClick(() => {
          router.back()
        })

      Slider({
        min: 100,
        max: 300,
        value: this.imageWidth,
        step: 10,
      })
        .width('100%')
        .blockColor('#36D')
        .trackThickness(5)
        .showTips(true)
        .onChange(value => {
          this.imageWidth = value
        })
    }
    .width('100%')
    .height('100%')
  }
}

☀️1.1.2 不保留主頁在頁面棧中，在返回時直接退出應用

登入頁（Login）和個人中心頁（Profile）的切換適用案例

1、登入頁

function onJumpClick(): void {
  router.replaceUrl({
    url: 'pages/ImagePage' // 目標url
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke replaceUrl succeeded.');
  })
}

☀️1.1.3 保留主頁在頁面棧中，以便返回時恢復狀態

設定頁（Setting）和一個主題切換頁

1、設定頁

// 在Setting頁面中
function onJumpClick(): void {
  router.pushUrl({
    url: 'pages/Theme' // 目標url
  }, router.RouterMode.Single, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  });
}

☀️1.1.4 保留主頁在頁面棧中，以便返回時恢復狀態

搜尋結果列表頁（SearchResult）和一個搜尋結果詳情頁（SearchDetail）

1、搜尋結果列表頁

// 在SearchResult頁面中
function onJumpClick(): void {
  router.replaceUrl({
    url: 'pages/SearchDetail' // 目標url
  }, router.RouterMode.Single, (err) => {
    if (err) {
      console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke replaceUrl succeeded.');})
}

🦋1.2 頁面引數

☀️1.2.1 主頁頁面引數傳遞和獲取

1、引數傳遞

class DataModelInfo {
  age: number;
}

class DataModel {
  id: number;
  info: DataModelInfo;
}

function onJumpClick(): void {
  // 在Home頁面中
  let paramsInfo: DataModel = {
    id: 123,
    info: {
      age: 20
    }
  };

  router.pushUrl({
    url: 'pages/Detail', // 目標url
    params: paramsInfo // 新增params屬性，傳遞自定義引數
  }, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  })
}

2、引數獲取

const params = router.getParams(); // 獲取傳遞過來的引數物件
const id = params['id']; // 獲取id屬性的值
const age = params['info'].age; // 獲取age屬性的值

☀️1.2.1 返回頁頁面引數傳遞和獲取