鸿蒙HarmonyOS NEXT开发，修改tabBar默认样式颜色+下划线（六）

1. 涉及到的技术点

1. SubTabBarStyle+indicator+labelStyle的使用

在上集代码实现过程中，Label文本字体未选中时的颜色默认值:#99182431，选中时的颜色
默认值:#FF007DFF，那如何修改默认的颜色呢？

2. 官方文档指南

1. 修改下划线的样式：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5#indicatorstyle10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E
2. 修改（Labe）文本的颜色：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5#labelstyle10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

3. demo具体实现，修改默认样式（颜色+下划线）

@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() {
    
    
          Text('华语的内容').fontSize(30)
        }
        .tabBar(SubTabBarStyle.of('华语').indicator({
    
    
          color: '#e22418', //下划线颜色
          borderRadius: 4, //下划线圆角半径
          height: 2, //下划线高度
        }).labelStyle({
    
    
          selectedColor: '#e22418', //选中时的颜色
          unselectedColor: '#999'   //未选中时的颜
        }))

        TabContent() {
    
    
          Text('欧美的内容').fontSize(30)
        }
        .tabBar('欧美')

        TabContent() {
    
    
          Text('韩国的内容').fontSize(30)
        }
        .tabBar("韩国")

        TabContent() {
    
    
          Text('日本的内容').fontSize(30)
        }
        .tabBar("日本")

        TabContent() {
    
    
          Text('中国香港的内容').fontSize(30)
        }
        .tabBar("中国香港")


        TabContent() {
    
    
          Text('中国台湾的内容').fontSize(30)
        }
        .tabBar("中国台湾")


        TabContent() {
    
    
          Text('印度的内容').fontSize(30)
        }
        .tabBar("印度")

        TabContent() {
    
    
          Text('泰国的内容').fontSize(30)
        }
        .tabBar("泰国")

        TabContent() {
    
    
          Text('其他的内容').fontSize(30)
        }
        .tabBar("其他")
      }
      // 滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置，内容分类较多，
      // 屏幕宽度无法容纳所有分类页签的情况下，需要使用可滚动的导航栏
      // 滚动导航栏需要设置Tabs组件的barMode属性，默认值为BarMode.Fixed表示为固定导航栏，
      // BarMode.Scrollable表示可滚动导航栏

      .barMode(BarMode.Scrollable)
      //设置点击TabBar页签时切换TabContent的动画形式
      .animationMode(AnimationMode.NO_ANIMATION)

    }
    .width('100%')
    .height('100%')

  }
}

4.运行效果图