Navigation

Navigation組件一般作為Page頁面的根容器，通過屬性設(shè)置來展示頁面的標(biāo)題欄、工具欄、導(dǎo)航欄等。

說明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

可以包含子組件。從API Version 9開始，推薦與[NavRouter]組件搭配使用。

接口

Navigation

Navigation()

Navigation10+

Navigation(pathInfos: NavPathStack)

綁定路由棧到Navigation組件。

參數(shù)：

屬性

除支持[通用屬性]外，還支持以下屬性：

事件

NavPathStack10+

Navigation路由棧。

pushPath10+

pushPath(info: NavPathInfo): void

將info指定的NavDestination頁面信息入棧。

參數(shù)：

pushPathByName10+

pushPathByName(name: string, param: unknown): void

將name指定的NavDestination頁面信息入棧，傳遞的數(shù)據(jù)為param。

參數(shù)：

pop10+

pop(): NavPathInfo | undefined

彈出路由棧棧頂元素。

返回值：

popToName10+

popToName(name: string): number

回退路由棧到第一個(gè)名為name的NavDestination頁面。

參數(shù)：

返回值：

popToIndex10+

popToIndex(index: number): void

回退路由棧到index指定的NavDestination頁面。

參數(shù)：

moveToTop10+

moveToTop(name: string): number

將第一個(gè)名為name的NavDestination頁面移到棧頂。

參數(shù)：

返回值：

moveIndexToTop10+

moveIndexToTop(index: number): void

將index指定的NavDestination頁面移到棧頂。

參數(shù)：

clear10+

clear(): void

清除棧中所有頁面。

getAllPathName10+

getAllPathName(): Array

獲取棧中所有NavDestination頁面的名稱。

返回值：

getParamByIndex10+

getParamByIndex(index: number): unknown | undefined

獲取index指定的NavDestination頁面的參數(shù)信息。

參數(shù)：

返回值：

getParamByName10+

getParamByName(name: string): Array

獲取全部名為name的NavDestination頁面的參數(shù)信息。

參數(shù)：

返回值：

getIndexByName10+

getIndexByName(name: string): Array

獲取全部名為name的NavDestination頁面的位置索引。

參數(shù)：

返回值：

size10+

size(): number

獲取棧大小。

返回值：

NavPathInfo10+

路由頁面信息。

constructor

constructor(name: string, param: unknown)

參數(shù)：

NavigationMenuItem類型說明

object類型說明

ToolbarItem10+類型說明

ToolbarItemStatus10+枚舉說明

NavigationTitleMode枚舉說明

NavigationCommonTitle類型說明

NavigationCustomTitle類型說明

NavBarPosition枚舉說明

NavigationMode枚舉說明

TitleHeight枚舉說明

說明：

目前可滾動(dòng)組件只支持List。

示例

示例1

// xxx.ets
class A {
  text: string = ''
  num: number = 0
}

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State currentIndex: number = 0

  @Builder NavigationTitle() {
    Column() {
      Text('Title')
        .fontColor('#182431')
        .fontSize(30)
        .lineHeight(41)
        .fontWeight(700)
      Text('subtitle')
        .fontColor('#182431')
        .fontSize(14)
        .lineHeight(19)
        .opacity(0.4)
        .margin({ top: 2, bottom: 20 })
    }.alignItems(HorizontalAlign.Start)
  }

  @Builder NavigationMenus() {
    Row() {
      Image('common/ic_public_add.svg')
        .width(24)
        .height(24)
      Image('common/ic_public_add.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
      Image('common/ic_public_more.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
    }
  }

  build() {
    Column() {
      Navigation() {
        TextInput({ placeholder: 'search...' })
          .width('90%')
          .height(40)
          .backgroundColor('#FFFFFF')
          .margin({ top: 8 })

        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number) = > {
            ListItem() {
              Text('' + item)
                .width('90%')
                .height(72)
                .backgroundColor('#FFFFFF')
                .borderRadius(24)
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, (item: number) = > item.toString())
        }
        .height(324)
        .width('100%')
        .margin({ top: 12, left: '10%' })
      }
      .title(this.NavigationTitle)
      .menus(this.NavigationMenus)
      .titleMode(NavigationTitleMode.Full)
      .toolbarConfiguration([
        {
          value: $r("app.string.navigation_toolbar_add"),
          icon: $r("app.media.ic_public_highlightsed")
        },
        {
          value: $r("app.string.navigation_toolbar_app"),
          icon: $r("app.media.ic_public_highlights")
        },
        {
          value: $r("app.string.navigation_toolbar_collect"),
          icon: $r("app.media.ic_public_highlights")
        }
      ])
      .hideTitleBar(false)
      .hideToolBar(false)
      .onTitleModeChange((titleModel: NavigationTitleMode) = > {
        console.info('titleMode' + titleModel)
      })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

示例2

// Index.ets
import { pageOneTmp } from './pageOne'
import { pageTwoTmp } from './pageTwo'
import { pages }  from './pageTwo'

@Entry
@Component
struct NavigationExample {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      pageOneTmp()
    } else if (name === 'pageTwo') {
      pageTwoTmp({ names: name, values: this.pageInfos } as pages)
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.pushPath({ name: 'pageOne' }) //將name指定的NavDestination頁面信息入棧
          })
      }
    }.title('NavIndex').navDestination(this.PageMap)
  }
}

// pageOne.ets
class tmpClass{
  count:number=10
}
@Component
export struct pageOneTmp {
  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            let tmp = new tmpClass()
            this.pageInfos.pushPathByName('pageTwo', tmp) //將name指定的NavDestination頁面信息入棧，傳遞的數(shù)據(jù)為param
          })
        Button('popToname', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.popToName('pageTwo') //回退路由棧到第一個(gè)名為name的NavDestination頁面
            console.log('popToName' + JSON.stringify(this.pageInfos), '返回值' + JSON.stringify(this.pageInfos.popToName('pageTwo')))
          })
        Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.popToIndex(1) // 回退路由棧到index指定的NavDestination頁面
            console.log('popToIndex' + JSON.stringify(this.pageInfos))
          })
        Button('moveToTop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.moveToTop('pageTwo') // 將第一個(gè)名為name的NavDestination頁面移到棧頂
            console.log('moveToTop' + JSON.stringify(this.pageInfos), '返回值' + JSON.stringify(this.pageInfos.moveToTop('pageTwo')))
          })
        Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.moveIndexToTop(1) // 將index指定的NavDestination頁面移到棧頂
            console.log('moveIndexToTop' + JSON.stringify(this.pageInfos))
          })
        Button('clear', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            this.pageInfos.clear() //清除棧中所有頁面
          })
        Button('get', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() = > {
            console.log('-------------------')
            console.log('獲取棧中所有NavDestination頁面的名稱', JSON.stringify(this.pageInfos.getAllPathName()))
            console.log('獲取index指定的NavDestination頁面的參數(shù)信息', JSON.stringify(this.pageInfos.getParamByIndex(1)))
            console.log('獲取全部名為name的NavDestination頁面的參數(shù)信息', JSON.stringify(this.pageInfos.getParamByName('pageTwo')))
            console.log('獲取全部名為name的NavDestination頁面的位置索引', JSON.stringify(this.pageInfos.getIndexByName('pageOne')))
            console.log('獲取棧大小', JSON.stringify(this.pageInfos.size()))
          })
      }.width('100%').height('100%')
    }.title('pageOne')
    .onBackPressed(() = > {
      this.pageInfos.pop() // 彈出路由棧棧頂元素
      console.log('pop' + '返回值' + JSON.stringify(this.pageInfos.pop()))
      return true
    })
  }
}

// pageTwo.ets

export class pages {
  names: string = ""
  values: NavPathStack | null = null
}

@Builder
export function pageTwoTmp(info: pages) {
  NavDestination() {
    Column() {
      Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
        .width('80%')
        .height(40)
        .margin(20)
        .onClick(() = > {
          (info.values as NavPathStack).pushPathByName('pageOne', null)
        })
    }.width('100%').height('100%')
  }.title('pageTwo')
  .onBackPressed(() = > {
    (info.values as NavPathStack).pop()
    return true
  })
}

審核編輯 黃宇