HarmonyOS鸿蒙Next中tabbar的按压效果怎么去掉？

HarmonyOS鸿蒙Next中tabbar的按压效果怎么去掉？ tabbar组件默认独占一行，很不满意，所以一开始就自定义tabbar，但是发现自己做的下划线游标不流畅。然后就忍忍用系统提供的，毕竟游标比较流畅，但是这个按压效果原来没当回事，结果今晚弄了几个小时搞不定，即不能改颜色，也不能去除，真是离了大谱了

4 回复

好像可以通过自定义tabbar的修饰器来禁用这个效果，可以尝试下：

Tabs() {
  // TabContent内容...
}
.barModifier(
  TabBarModifier
    .stateEffect(false)  // 关键属性：禁用所有状态效果
    .align(TabBarAlign.Start)  // 可选：调整TabBar对齐方式
)

更多关于HarmonyOS鸿蒙Next中tabbar的按压效果怎么去掉？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


同蹲

在HarmonyOS Next中，可以通过修改TabBar组件的样式属性去掉按压效果。在ArkUI中，使用TabBar时，设置pressEffect属性为false即可禁用按压视觉反馈。示例代码：TabBar({ barPosition: BarPosition.End }) { ... }.pressEffect(false)。

在HarmonyOS Next中，可以通过自定义TabBar组件样式来移除按压效果。核心方法是使用@State装饰器控制选中态，并避免使用系统默认的交互样式。

具体操作如下：

  1. 自定义TabBarItem组件：不使用TabContent默认关联，改为自定义Column或Row布局。
  2. 禁用按压态：在自定义组件中不绑定stateEffect属性，或将其设置为false。
  3. 控制选中样式：通过@State变量管理选中索引，仅用普通样式显示选中态，不启用按压高亮。

示例代码片段：

@Entry
@Component
struct CustomTabBar {
  @State currentIndex: number = 0

  build() {
    Row() {
      // 自定义Tab项，无按压效果
      this.TabItem(0, '首页')
      this.TabItem(1, '发现')
    }
  }

  @Builder TabItem(index: number, text: string) {
    Column() {
      Text(text)
        .fontColor(this.currentIndex === index ? '#007DFF' : '#666')
    }
    .onClick(() => {
      this.currentIndex = index
    })
    // 关键：不添加stateEffect属性即无按压效果
  }
}

这样即可完全自定义TabBar的视觉交互，移除系统默认的按压效果。

回到顶部