HarmonyOS-UIAbitity-Navigation——【坚果派-红目香薰】

​

摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

目录

摘要

HarmonyOS-UIAbitity-Navigation

接口

属性

NavigationMenuItem类型说明

Object类型说明

NavigationTitleMode枚举说明

事件

示例代码

HarmonyOS-UIAbitity-Navigation

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

接口

Navigation()

创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。

属性

NavigationMenuItem类型说明

Object类型说明

NavigationTitleMode枚举说明

说明

目前可滚动组件只支持List。

事件

示例代码

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

  @Builder NavigationTitle() {
    Column() {
      Text('title')
        .width(80)
        .height(60)
        .fontColor(Color.Blue)
        .fontSize(30)
    }
    .onClick(() => {
      console.log("title")
    })
  }

  @Builder NavigationMenus() {
    Row() {
      Image('images/add.png')
        .width(25)
        .height(25)
      Image('comment/more.png')
        .width(25)
        .height(25)
        .margin({ left: 30 })
    }.width(100)
  }

  build() {
    Column() {
      Navigation() {
        Search({ value: '', placeholder: "" }).width('85%').margin(26)
        List({ space: 5, initialIndex: 0 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              Text('' + item)
                .width('90%')
                .height(80)
                .backgroundColor('#3366CC')
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, item => item)
        }
        .listDirection(Axis.Vertical)
        .height(300)
        .margin({ top: 10, left: 18 })
        .width('100%')

        Button(this.hideBar ? "tool bar" : "hide bar")
          .onClick(() => {
            this.hideBar = !this.hideBar
          })
          .margin({ left: 135, top: 60 })
      }
      .title(this.NavigationTitle)
      .subTitle('subtitle')
      .menus(this.NavigationMenus)
      .titleMode(NavigationTitleMode.Free)
      .hideTitleBar(false)
      .hideBackButton(false)
      .onTitleModeChange((titleModel: NavigationTitleMode) => {
        console.log('titleMode')
      })
      .toolBar({ items: [
        { value: 'app', icon: 'images/grid.svg', action: () => {
          console.log("app")
        } },
        { value: 'add', icon: 'images/add.svg', action: () => {
          console.log("add")
        } },
        { value: 'collect', icon: 'images/collect.svg', action: () => {
          console.log("collect")
        } }] })
      .hideToolBar(this.hideBar)
    }
  }
}

示例效果：

​

编辑

 拉动效果：

​