第九节HarmonyOS 常用基础组件24-Navigation

1、描述

Navigation组件一般作为Page页面的根容器，通过属性设置来展示的标题栏、工具栏、导航栏等。

2、子组件

可以包含子组件，推荐与NavRouter组件搭配使用。

3、接口

Navigation()

4、属性

1. 属性中一些类型的说明

Menus -> NavigationMenuItem类型说明

toolBar -> object类型说明

titleMode -> NavigationTitleMode枚举说明

NavBarPosition枚举说明

NavigationMode枚举说明

TitleHeight枚举说明

6、事件

7、示例

import router from '@ohos.router'
 
 
 
@Entry
 
@Component
 
struct NavigationPage {
 
  @State message: string = 'Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。'
 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
  @State currentIndex: number = 0
 
  @State Build: Array<Object> = [
 
    {
 
      text: 'add',
 
      num: 0
 
    },
 
    {
 
      text: 'app',
 
      num: 1
 
    },
 
    {
 
      text: 'collect',
 
      num: 2
 
    }
 
  ]
 
 
 
  // 页面标题
 
  @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() {
 
    Column() {
 
      Blank(12)
 
      Row() {
 
        Image($r("app.media.navigation_icon1"))
 
          .width(24)
 
          .height(24)
 
        Image($r("app.media.navigation_icon1"))
 
          .width(24)
 
          .height(24)
 
          .margin({ left: 24 })
 
        Image($r("app.media.navigation_icon2"))
 
          .width(24)
 
          .height(24)
 
          .margin({ left: 24 })
 
      }
 
    }
 
 
 
  }
 
 
 
  // 设置工具栏内容
 
  @Builder
 
  NavigationToolbar() {
 
    Row() {
 
      ForEach(this.Build, (item) => {
 
        Column() {
 
          Image(this.currentIndex == item.num ? $r("app.media.navigation_toolbar_public_selected") : $r("app.media.navigation_toolbar_public"))
 
            .width(24)
 
            .height(24)
 
          Text(item.text)
 
            .fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431')
 
            .fontSize(10)
 
            .lineHeight(14)
 
            .fontWeight(500)
 
            .margin({ top: 3 })
 
        }.width(104).height(56)
 
        .onClick(() => {
 
          this.currentIndex = item.num
 
        })
 
      })
 
    }.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) => {
 
            ListItem() {
 
              Text('' + item)
 
                .width('90%')
 
                .height(72)
 
                .backgroundColor('#FFFFFF')
 
                .borderRadius(24)
 
                .fontSize(16)
 
                .fontWeight(500)
 
                .textAlign(TextAlign.Center)
 
            }.editable(true)
 
          }, item => item)
 
        }
 
        .height(324)
 
        .width('100%')
 
        .margin({ top: 12, left: '10%' })
 
 
 
        Button("Navigation文本文档")
 
          .fontSize(20)
 
          .backgroundColor('#007DFF')
 
          .width('96%')
 
          .onClick(() => {
 
            // 处理点击事件逻辑
 
            router.pushUrl({
 
              url: "pages/baseComponent/navigation/NavigationDesc",
 
            })
 
          })
 
          .margin({ top: 20 })
 
 
 
      }
 
      .title(this.NavigationTitle) // 页面标题
 
      .menus(this.NavigationMenus) // 页面右上角菜单
 
      .titleMode(NavigationTitleMode.Full) // 页面标题栏显示模式。
 
      .toolBar(this.NavigationToolbar) // 设置工具栏内容
 
      .hideTitleBar(false) // 隐藏标题栏
 
      .hideToolBar(false) // 隐藏工具栏
 
      .onTitleModeChange((titleModel: NavigationTitleMode) => { //
 
        console.info('titleMode' + titleModel)
 
      })
 
    }
 
    .width('100%').height("100%").backgroundColor('#F1F3F5')
 
  }
 
}

8、效果图