#鸿蒙通关秘籍#如何修改HarmonyOS NEXT中TabBar的默认样式颜色和下划线?

HarmonyOS
2024-12-02 13:35:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
数据小魔头

在HarmonyOS NEXT中,为了改变TabBar的默认样式颜色和下划线,可以使用SubTabBarStyleindicatorlabelStyle方法进行定制。以下是详细的代码实现:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('最新的内容').fontSize(30)
        }
        .tabBar(SubTabBarStyle.of('最新').indicator({
          color: '#e22418', //下划线颜色
          borderRadius: 4, //下划线圆角半径
          height: 2, //下划线高度
        })
          .labelStyle({
            selectedColor: '#e22418', //选中时的颜色
            unselectedColor: '#999'   //未选中时的颜色
          })
        )

        // 添加其他TabContent和tabBar配置
        // ...

      }
      .barMode(BarMode.Scrollable)
      .animationMode(AnimationMode.NO_ANIMATION)
    }
    .width('100%')
    .height('100%')
  }
}

通过上述代码,利用indicator设置下划线(颜色、圆角、高度),使用labelStyle方法修改文本颜色,从而进行样式的自定义。

分享
微博
QQ
微信
回复
2024-12-02 16:36:04
相关问题
如何给文字添加下划线?
843浏览 • 1回复 待解决
HarmonyOS 虚线下划线实现方式
100浏览 • 1回复 待解决
tab-bar下方下划线怎么去掉?
3341浏览 • 1回复 待解决
希望提供字体是否为下划线文本接口
930浏览 • 1回复 待解决
Tabs组件选中下划线需要平移动效
1799浏览 • 1回复 待解决
Tab组件Tabbar字体颜色如何修改
1455浏览 • 1回复 待解决
修改Button默认样式吗?
450浏览 • 1回复 待解决