HarmonyOs ArkUI- Tabs组件(导航栏)

Tab组件几乎是每一个App首页都要用到的。这个组件在使用上有个特点就是，几乎每个应用都会用，但是几乎每个应用就算干到公司倒闭， 也只用那么寥寥几次而已。开发次数不会太多。但是开发的位置却会比较重点。这个相当于一个外部的架子。我认为对于这个控件我们要掌握怎么让它有很好的交互体验，怎么让当行按钮长得好看，滑起来比较流畅。怎么切换页面这些应该就行了。

Tab基本布局

我们看下下图，结合之前自己使用手机应用的印象，应该一眼就能看出来这个Tab是用来干啥的了。

简而言之，这个Tab就是做导航栏用的。一般，尤其是电商类的App点开首页下方就是导航栏。

好下面我们了解一下概念。

上述图每一张的效果都是Tabs组件(注意后面有个s)来完成的。就是叫Tabs组件。Tabs组件下分两个部分， TabBar， 和 TabContent。

• TabBar指的是导航页签栏。这个导航栏可以指定，是在底部，顶部，还是侧边栏。
• TabContent是内容页。

其结构与Android中的导航栏组合方式基本一致。

所以，我们在写代码的时候，骨架上也会遵循这个结构。

@Entry
@Component
struct TabsPage {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Tabs(){
        TabContent(){
          Text("首页内容")
        }
        .backgroundColor(Color.Yellow)
        .tabBar("首页")

        TabContent(){
          Text("商城内容")
        }
        .backgroundColor(Color.Pink)
        .tabBar("商城")

        TabContent(){
          Text("朋友内容")
        }
        .backgroundColor(Color.Blue)
        .tabBar("朋友")

        TabContent(){
          Text("我的内容")
        }
        .backgroundColor(Color.Green)
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
  }
}

效果如图所示：

我们会发现这个导航栏是在顶部而非底部的。同时还有其他的特点。也就是导航栏如果不做任何设置，特点为

• TabBar位置在上方。
• TabBar里面的文字，底部加了条，而且点击的时候，背景有点击效果，条也会变动。颜色为HarmonyOs配套的蓝色系。
• TabContent的大小，我们没有做任何指定，似乎就已经是占满其余的内容了。

好，了解了以上特点，我们也大致知道要写一个比较好的这种架子应该改什么了。首先，市面上总的导航护栏，是位于下方的，而且，有的应用点击的时候没有这些效果，而且界面长得也不一样，人家是图标。

而这种上方的导航页，通常是一个大导航里子Tab页里又有分类时用到的。 商城中用的多。我们接下来就会往这个方向上凑！

说明

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

底部导航栏

底部导航栏通常用于一级界面的底部，用户打开应用，就能够分清应用的功能分类。以及页签对应的内容，并且其位于底部更加有利于用户单手点击。

修改为底部导航栏的方式为 修改 Tabs组件的barPosition属性

@Entry
@Component
struct TabsPage {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Tabs(){
        TabContent(){
          Text("首页内容")
        }
        .backgroundColor(Color.Yellow)
        .tabBar("首页")

        TabContent(){
          Text("商城内容")
        }
        .backgroundColor(Color.Pink)
        .tabBar("商城")

        TabContent(){
          Text("朋友内容")
        }
        .backgroundColor(Color.Blue)
        .tabBar("朋友")

        T