HarmonyOS NEXT鸿蒙开发入门，选项卡 (Tabs)的使用

1. 官方文档指南

1. 选项卡 (Tabs)： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-tabs-V5

2. Tabs 其它API使用: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5

3. 修改页签默认样式：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5

2. 基本布局（概念）

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边

官方示意图如下：

说明

1. TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
2. TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

Tabs使用花括号包裹TabContent，如图2，其中TabContent显示相应的内容页。 官方示意图如下：

3. 常用导航栏类型

顶部导航栏 （默认）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('热榜的内容').fontSize(30)
        }
        .tabBar('热榜')

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

        TabContent() {
          Text('奥运会内容').fontSize(30)
        }
        .tabBar("奥运会")

      }
    }
  }
}

运行效果

底部导航栏

导航栏位置使用Tabs的barPosition参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End

@Entry
@Component
struct Index {
  build() {
    Column() {
      
      //barPosition设置为BarPosition.End 
      Tabs({barPosition:BarPosition.End}) {
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('热榜的内容').fontSize(30)
        }
        .tabBar('热榜')

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

        TabContent() {
          Text('奥运会内容').fontSize(30)
        }
        .tabBar("奥运会")

      }
    }
  }
}

运行效果

当页签类型一屏显示不下去的时候，可以给Tabs设置barMode属性，官方文档说明：

4. 修改默认（页签）字体的颜色和下划线颜

SubTabBarStyle+ labelStyle+indicator的使用

@Entry
@Component
struct Index {
  build() {
    Column() {

      Tabs() {
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar(SubTabBarStyle.of("推荐")
          //修改页签的默认颜色
          .labelStyle({
            unselectedColor: '#999999',
            selectedColor: '#fe312b'
          })
          //修改页签下划线颜色
          .indicator({
            color: '#fe312b'
          })
        )

        TabContent() {
          Text('热榜的内容').fontSize(30)
        }
        .tabBar(SubTabBarStyle.of("热榜")
          .labelStyle({
            unselectedColor: '#999999',
            selectedColor: '#fe312b'
          })
          .indicator({
            color: '#fe312b'
          })
        )

        TabContent() {
          Text('NBA的内容').fontSize(30)
        }
        .tabBar(SubTabBarStyle.of("NBA")
          .labelStyle({
            unselectedColor: '#999999',
            selectedColor: '#fe312b'
          })
          .indicator({
            color: '#fe312b'
          })
        )

        TabContent() {
          Text('奥运会内容').fontSize(30)
        }
        .tabBar(SubTabBarStyle.of("奥运会")
          .labelStyle({
            unselectedColor: '#999999',
            selectedColor: '#fe312b'
          })
          .indicator({
            color: '#fe312b'
          })
        )

      }
    }
  }
}

运行效果