HarmonyOS 鸿蒙Next 组件导航 (Navigation)可以隐藏标题栏、菜单栏、工具栏么

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 组件导航 (Navigation)可以隐藏标题栏、菜单栏、工具栏么

组件导航 (Navigation)可以隐藏标题栏、菜单栏、工具栏么

4 回复

使用.hideTitleBar(true)可隐藏标题栏,hideToolBar可设置隐藏工具栏,可通过状态变量恐吓之是否显示菜单栏,请参考以下示例:


// xxx.ets

import { trustedAppService } from '[@kit](/user/kit).DeviceSecurityKit'

class A {

  text: string = ''

  num: number = 0

}

[@Entry](/user/Entry)

[@Component](/user/Component)

struct NavigationExample {

  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  [@State](/user/State) currentIndex: number = 0

  [@State](/user/State) isShowMenu:boolean = true

  [@Builder](/user/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](/user/Builder) NavigationMenus() {

    if (this.isShowMenu){

      Row() {

        Image($r('app.media.app_icon'))

          .width(24)

          .height(24)

        Image($r('app.media.app_icon'))

          .width(24)

          .height(24)

          .margin({ left: 24 })

        Image($r('app.media.app_icon'))

          .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)

            }

            .onClick(()=>{

              //是否显示菜单栏

              this.isShowMenu = !this.isShowMenu

            })

          }, (item: number) => item.toString())

        }

        .height(324)

        .width('100%')

        .margin({ top: 12, left: '10%' })

      }

      .title(this.NavigationTitle())

      .menus(this.NavigationMenus())

      .titleMode(NavigationTitleMode.Full)

      .toolbarConfiguration([

        {

          value: '1',

          icon: $r("app.media.startIcon")

        },

        {

          value: '2',

          icon: $r("app.media.startIcon")

        },

        {

          value: '2',

          icon: $r("app.media.startIcon")

        }

      ])

      .hideTitleBar(true)//是否显示标题栏

      .hideToolBar(true)//设置隐藏工具栏

      .onTitleModeChange((titleModel: NavigationTitleMode) => {

        console.info('titleMode' + titleModel)

      })

    }.width('100%').height('100%').backgroundColor('#F1F3F5')

  }

}

更多关于HarmonyOS 鸿蒙Next 组件导航 (Navigation)可以隐藏标题栏、菜单栏、工具栏么的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我使用侧边导航,菜单栏取消了,但是无法将tite 置顶。上面还有部分占用

设置属性hideToolBar

hideToolBar(value: boolean)

true隐藏工具栏,

属性hideTitleBar

hideTitleBar(value: boolean)

true隐藏标题栏。

属性hideNavBar

hideNavBar(value: boolean)

设置是否隐藏导航栏。设置为true时,隐藏Navigation的导航栏,包括标题栏、内容区和工具栏。

在HarmonyOS鸿蒙Next组件导航(Navigation)中,可以隐藏标题栏、菜单栏、工具栏。具体操作通常依赖于组件的属性和方法配置。

对于标题栏的隐藏,可以通过设置页面的TitleBar属性为none或者通过调用相关API来实现。这通常在页面的配置文件或代码中完成。

菜单栏的隐藏则可能需要调整页面的布局文件,确保不包含显示菜单栏的组件,或者通过编程方式动态控制其可见性。

工具栏的隐藏也类似,可以通过设置工具栏组件的可见性属性为不可见,或者在代码中通过调用相应的方法来隐藏。

需要注意的是,不同的应用或页面布局可能有所差异,因此具体的实现方式可能会有所不同。开发者需要参考具体的HarmonyOS开发文档和组件API,以确保正确实现隐藏功能。

此外,隐藏这些元素后,可能需要调整页面的其他布局元素,以保持页面的整体美观和用户体验。

如果在进行这些操作时遇到问题,或者需要更详细的指导,请直接参考HarmonyOS的官方开发文档,或者联系官网客服获取帮助。官网地址是:https://www.itying.com/category-93-b0.html

回到顶部