HarmonyOS应用开发Navigation工具栏显隐技术

一、小知识

在HarmonyOS应用开发中，导航栏（Navigation）的工具栏（ToolBar）显隐控制是提升界面交互体验的核心能力。大家伙们跟着我这篇小文章一起深入了解一下工具栏显隐的实现原理、API特性、多版本适配策略，并结合一些实际开发案例看看吧。

二、核心知识点哦

2.1 基础显隐的控制

咱们通过hideToolBar属性实现工具栏的显隐控制：

// 基础显隐控制（鸿蒙5+）
Navigation() {
  // 页面内容
}
.hideToolBar(true)  // 隐藏工具栏

关键特性：

• 默认值：false（显示工具栏）
• 作用层级：影响当前Navigation组件及其子页面
• 限制条件：需配合titleMode使用，当标题栏隐藏时工具栏自动隐藏

2.2 动态显隐控制

鸿蒙6+新增动态显隐API：

// 动态显隐配置（鸿蒙6+）
.titleBar({
  dynamicHide: {
    hideToolBar: true,    // 动态隐藏工具栏
    triggerOffset: 100,   // 触发偏移量（vp单位）
    animation: {
      duration: 300,      // 动画的时长
      curve: AnimationCurve.EaseOut
    }
  }
})

三、多版本实现对比一下下

3.1 API差异来看看有些啥

3.2 代码实现对比看看

鸿蒙5滴：

// 鸿蒙5静态显隐
Navigation() {
  List() {
    // 列表内容
  }
}
.hideToolBar(true)
.titleMode(NavigationTitleMode.Mini)

鸿蒙6+动态显隐：

// 鸿蒙6+滚动显隐
@State isScrolling = false
Scroll() {
  isScrolling = true
  // 滚动监听逻辑
}
.navigation {
  .titleBar({
    dynamicHide: {
      hideToolBar: this.isScrolling
    }
  })
}

四、举些小例子

4.1 列表页工具栏显隐

场景需求：列表滚动时隐藏工具栏，静止时显示

@Entry
@Component
struct ListPage {
  @State scrollOffset = 0
  @State showToolbar = true

  build() {
    Navigation() {
      Scroll() {
        List({ space: 20 }) {
          ForEach(0..50, (index) => {
            ListItem() {
              Text(`Item ${index}`)
                .height(60)
            }
          })
        }
        .onScroll((offset) => {
          this.scrollOffset = offset
          this.showToolbar = offset === 0
        })
      }
    }
    .titleBar({
      content: {
        title: { mainTitle: "商品列表" },
        toolBar: {
          items: [
            { value: "筛选", icon: "filter" }
          ]
        }
      },
      dynamicHide: {
        hideToolBar: this.scrollOffset > 50
      }
    })
  }
}

4.2 详情页工具栏显隐

场景需求：详情页固定显示工具栏

@Entry
@Component
struct DetailPage {
  build() {
    Navigation() {
      Column() {
        Image($r("app.media.product"))
          .width("100%")
          .height(300)
        Text("商品详情")
          .fontSize(24)
      }
    }
    .hideToolBar(false)  // 强制显示工具栏
    .toolBar({
      items: [
        { value: "收藏", icon: "heart" },
        { value: "分享", icon: "share" }
      ]
    })
  }
}

五、多设备适配小技巧

5.1 屏幕方向适配

// 横屏隐藏工具栏
@MediaQuery(media: ScreenOrientation.Landscape)
.navigation {
  .hideToolBar(true)
}

5.2 系统版本适配

// 鸿蒙5兼容处理
if (version < 6) {
  this.navigation.hideToolBar(true)
} else {
  this.navigation.titleBar({
    dynamicHide: { hideToolBar: true }
  })
}

六、一般的交互流程

graph TD
    A[用户滚动页面] --> B{滚动距离>阈值?}
    B -->|是| C[触发隐藏动画]
    B -->|否| D[保持显示状态]
    C --> E[更新显隐状态]
    E --> F[执行布局重绘]
    F -->|状态变化| G[触发回调事件]

七、性能优化小建议

1. 防抖处理：

   .onScroll(debounce(200, (offset) => {
     this.handleScroll(offset)
   }))

2. 状态缓存：

   @Cacheable
   private getToolbarState(): boolean {
     return this.scrollOffset > 50
   }

3. 渲染优化：

   • 使用@Link替代深层状态传递
   • 避免在onScroll中执行高耗时操作

八、总结一下下

1. 显隐策略的选择：

   • 内容消费型页面：推荐动态滚动显隐
   • 操作密集型页面：保持工具栏常显
   • 多页面导航：统一管理显隐状态

2. 注意一下下哦：

   • 避免在build方法中频繁调用显隐方法
   • 嵌套导航时需逐层设置显隐属性
   • 深色模式下需同步调整工具栏图标颜色

3. 调试小技巧：

   • 使用DevEco Studio的Layout Inspector
   • 添加日志监控显隐状态变化
   • 通过@ohos.animator实现复杂滴动画