HarmonyOS鸿蒙Next中HdsNavigation的stackBuilder里面的内容为什么无法点击？

HarmonyOS鸿蒙Next中HdsNavigation的stackBuilder里面的内容为什么无法点击？

@Builder
titleBuilder() {
  Row() {
    if (this.sidebarType === SideBarContainerType.Overlay) {
      Button({ type: ButtonType.Normal }) {
        SymbolGlyph(this.isShowSidebar ? $r('sys.symbol.open_sidebar') : $r('sys.symbol.close_sidebar'))
          .fontWeight(FontWeight.Normal)
          .fontSize($r('sys.float.ohos_id_text_size_headline7'))
          .fontColor([$r('sys.color.ohos_id_color_titlebar_icon')])
          .hitTestBehavior(HitTestMode.None)
      }
      .id('side_bar_button')
      .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
      .height(40)
      .width(40)
      .borderRadius(8)
      .margin({ right: 16 })
      .onClick(() => {
        this.isShowSidebar = !this.isShowSidebar;
      })
    }

    Row() {
      Select(this.selectOptions)
        .selected(this.selectLibraryIndex)
        .value(this.library?.name)
        .font({
          weight: FontWeight.Medium
        })
        .selectedOptionFontColor($r('sys.color.select_font_color'))
        .onSelect((index: number, text?: string | undefined) => {
          if (this.selectLibraryIndex !== index) {
            this.selectLibraryIndex = index
            this.library = this.libraries[index]
            this.topTabIndex = 0
            this.needUpdate = !this.needUpdate
          }
        })
        .onClick(async () => {
          this.selectOptions = []
          this.libraries = await getLibraries()
          if (this.libraries.length > 0) {
            this.libraries.forEach((library, index) => {
              this.selectOptions.push({ value: library.name })
            })
          }
        })
        .borderRadius(8)
        .flexShrink(1)

      SymbolGlyph(this.isConnect ? $r('sys.symbol.checkmark_icloud_fill') : $r('sys.symbol.icloud_slash_fill'))
        .margin({ left: 16 })
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .fontColor([this.isConnect ? Color.Green : Color.Orange])
    }
    .width('100%')
    .layoutWeight(1)
    .clip(true)

    Button({ type: ButtonType.Normal }) {
      SymbolGlyph($r('sys.symbol.magnifyingglass'))
        .fontWeight(FontWeight.Normal)
        .fontSize($r('sys.float.ohos_id_text_size_headline7'))
        .fontColor([$r('sys.color.ohos_id_color_titlebar_icon')])
        .hitTestBehavior(HitTestMode.None)
    }
    .margin({ left: 16 })
    .backgroundColor(deviceTypeInfo === '2in1' ? $r('sys.color.button_background_color_transparent') :
      $r('sys.color.comp_background_tertiary'))
    .height(40)
    .width(40)
    .borderRadius(8)
    .geometryTransition("search")
    .onClick(() => {
      this.pageInfos.pushPathByName('search', null)
    })
  }
  .width(deviceTypeInfo === '2in1' ? this.sideBarContentWidth - 72 : this.sideBarContentWidth)
  .height(56)
  .padding({ left: 16, right: 16 })
  .justifyContent(FlexAlign.SpaceBetween)
}

HdsNavigation(this.pageInfos) {

}
  .width('100%')
  .height('100%')
  .mode(NavigationMode.Stack)
  .titleBar({
    enableComponentSafeArea: false,
    style: {
      scrollEffectOpts: {
        enableScrollEffect: this.pageIndex === 0 ? false : true,
        blurEffectiveStartOffset: {
          value: 20,
          unit: LengthUnit.VP
        }
      }
    },
    content: {
      stackBuilder: this.titleBuilder()
    }
  })
  .titleMode(HdsNavigationTitleMode.MINI)
  .hideBackButton(true)

更多关于HarmonyOS鸿蒙Next中HdsNavigation的stackBuilder里面的内容为什么无法点击？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

改成下面的代码看看

stackBuilder: (): void => this.titleBuilder()

参考：设置自定义区域-组件导航-UI Design Kit（UI设计套件）-应用框架

更多关于HarmonyOS鸿蒙Next中HdsNavigation的stackBuilder里面的内容为什么无法点击？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以了，感谢！

在HarmonyOS Next中，HdsNavigation的stackBuilder内容无法点击通常由以下原因导致：

  1. 组件未正确绑定点击事件处理器
  2. 页面路由配置存在冲突或错误
  3. 组件状态被禁用或透明度设置为0
  4. 布局层级覆盖导致事件无法传递

检查事件绑定与组件属性配置即可解决。

在您的代码中，HdsNavigation 的 stackBuilder 内容无法点击，最可能的原因是 SymbolGlyph 组件设置了 .hitTestBehavior(HitTestMode.None)。这个属性禁用了组件的触摸事件响应，导致点击无效。

请检查 titleBuilder 中的两个 SymbolGlyph 实例：

  • 侧边栏按钮的 SymbolGlyph
  • 搜索按钮的 SymbolGlyph

两者都设置了 hitTestBehavior(HitTestMode.None)，这会阻止点击事件传递到父组件 Button。移除这些设置应该能恢复点击功能：

SymbolGlyph(this.isShowSidebar ? $r('sys.symbol.open_sidebar') : $r('sys.symbol.close_sidebar'))
  .fontWeight(FontWeight.Normal)
  .fontSize($r('sys.float.ohos_id_text_size_headline7'))
  .fontColor([$r('sys.color.ohos_id_color_titlebar_icon')])
  // 移除 .hitTestBehavior(HitTestMode.None)

同样处理搜索按钮的 SymbolGlyph。HitTestMode.None 通常用于纯装饰性元素，需要交互的组件不应使用此模式。

回到顶部