HarmonyOS ArkUI容器類(lèi)組件-Tabs組件（Tabs、TabContent）

ArkUI開(kāi)發(fā)框架提供了一種可以通過(guò)頁(yè)簽進(jìn)行內(nèi)容視圖切換的容器組件，每個(gè)頁(yè)簽對(duì)應(yīng)一個(gè)內(nèi)容視圖的容器組件 Tabs ，它允許包含子組件且子組件只能是 TabContent ，本節(jié)筆者介紹一下 Tabs 的簡(jiǎn)單使用。

Tabs定義介紹

interface TabsInterface {
  (value?: { barPosition?: BarPosition; index?: number; controller?: TabsController }): TabsAttribute;
}

declare enum BarPosition {
  Start,
  End,
}
  • barPosition：指定頁(yè)簽位置來(lái)創(chuàng)建 Tabs 容器組件， BarPosition 定義了以下兩種類(lèi)型：
    • Start（默認(rèn)值）：當(dāng) vertical 屬性方法設(shè)置為 true 時(shí)，頁(yè)簽位于容器左側(cè)； vertical 屬性方法設(shè)置為 false 時(shí)，頁(yè)簽位于容器頂部。
    • End： vertical 屬性方法設(shè)置為 true 時(shí)，頁(yè)簽位于容器右側(cè)； vertical 屬性方法設(shè)置為 false 時(shí)，頁(yè)簽位于容器底部。
  • index：指定初次初始頁(yè)簽索引，默認(rèn)值為 0 。
  • controller：設(shè)置 Tabs 控制器。

簡(jiǎn)單樣例如下所示：

@Entry @Component struct SideBarContainerTest {

  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Tabs({// Tabs不設(shè)置vertical屬性時(shí)，默認(rèn)上下排版
        barPosition: BarPosition.Start,
        controller: this.controller
      }) {
        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#aabbcc")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("消息")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#bbccaa")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("聯(lián)系人")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#ccaabb")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("動(dòng)態(tài)")
      }
      .size({width: "100%", height: "100%"})
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

樣例運(yùn)行結(jié)果如下圖所示：

Tabs屬性介紹

declare class TabsAttribute extends CommonMethod<TabsAttribute> {
  vertical(value: boolean): TabsAttribute;
  scrollable(value: boolean): TabsAttribute;
  barMode(value: BarMode): TabsAttribute;
  barWidth(value: Length): TabsAttribute;
  barHeight(value: Length): TabsAttribute;
  animationDuration(value: number): TabsAttribute;
}

  • vertical：設(shè)置 Tab 是否為左右排列，默認(rèn)為 false ，表示上下排列。

  • vertical設(shè)置為false：

  • barPosition: BarPosition.Start

            Tabs({
              barPosition: BarPosition.Start, // 設(shè)置Tab在上方
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("聯(lián)系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("動(dòng)態(tài)")
            }
            .vertical(false)

樣例運(yùn)行結(jié)果如下圖所示：

  • barPosition: BarPosition.End
            Tabs({
              barPosition: BarPosition.End, // 設(shè)置Tab在下方
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("聯(lián)系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("動(dòng)態(tài)")
            }
            .vertical(false)

樣例運(yùn)行結(jié)果如下圖所示：

  • vertical設(shè)置為true：
  • barPosition: BarPosition.Start

簡(jiǎn)單樣例如下所示：

            Tabs({
              barPosition: BarPosition.Start, // 設(shè)置Tab在左側(cè)
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("聯(lián)系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("動(dòng)態(tài)")
            }
            .width('100%')
            .height('100%')
            .barWidth(80)
            .barHeight(150)
            .vertical(true)
  • barPosition: BarPosition.End
            Tabs({
              barPosition: BarPosition.End, // 設(shè)置Tab在右側(cè)
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("聯(lián)系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("動(dòng)態(tài)")
            }
            .width('100%')
            .height('100%')
            .barWidth(80)
            .barHeight(150)
            .vertical(true)
  • scrollable：是否可以通過(guò)滑動(dòng)進(jìn)行頁(yè)面切換，默認(rèn)為 true ，表示可以滑動(dòng)切換頁(yè)面。
  • barMode：設(shè)置 TabBar 的布局模式， TabBar 的類(lèi)型說(shuō)明如下：
    • Scrollable： TabBar 使用實(shí)際布局寬度, 超過(guò)總長(zhǎng)度后可滑動(dòng)。
    • Fixed：所有 TabBar 平均分配寬度。
  • barWidth：設(shè)置 TabBar 的寬度值，不設(shè)置時(shí)使用系統(tǒng)主題中的默認(rèn)值。
  • barHeight：設(shè)置 TabBar 的高度值，不設(shè)置時(shí)使用系統(tǒng)主題中的默認(rèn)值。
  • animationDuration：設(shè)置 TabContent 滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)，默認(rèn)值為 200 。

Tabs事件介紹

declare class TabsAttribute extends CommonMethod<TabsAttribute> {
  onChange(event: (index: number) => void): TabsAttribute;
}
  • onChange： Tabs 頁(yè)簽切換后觸發(fā)的事件， index 表示當(dāng)前頁(yè)簽下標(biāo)。

TabContent定義介紹

interface TabContentInterface {
  (): TabContentAttribute;
}

由源碼可知， TabContent 目前不需要配置默認(rèn)參數(shù)。

TabContent屬性介紹

declare class TabContentAttribute extends CommonMethod<TabContentAttribute> {
  tabBar(value: string | Resource | CustomBuilder |
    { icon?: string | Resource; text?: string | Resource }): TabContentAttribute;
}
  • tabBar：設(shè)置 TabBar 的顯示標(biāo)簽，根據(jù)源碼可知，tabBar參數(shù)類(lèi)型支持多種數(shù)據(jù)類(lèi)型：
    • string | Resource：直接使用文本，樣式使用系統(tǒng)自帶的。
    • { icon?: string | Resource; text?: string | Resource }：
      • icon：設(shè)置標(biāo)簽的圖標(biāo)。
      • text：設(shè)置標(biāo)簽的文本。
    • CustomBuilder：自定義 TabBar 標(biāo)簽

Tabs完整樣例

@Entry @Component struct TabsTest {

  private controller: TabsController = new TabsController();

  @State index: number = 0; // 選項(xiàng)卡下標(biāo)，默認(rèn)為第一個(gè)

  @Builder tabMessage() {   // 自定義消息標(biāo)簽
    Column() {
      Column() {
        Blank()
        Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
          .size({width: 25, height: 25})
        Text('消息')
          .fontSize(16)
          .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
        Blank()
      }
      .height('100%')
      .width("100%")
      .onClick(() => {
        this.index = 0;
        this.controller.changeIndex(this.index);
      })
    }
  }

  @Builder tabContract() {  // 自定義聯(lián)系人標(biāo)簽
    Column() {
      Blank()
      Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
        .size({width: 25, height: 25})
      Text('聯(lián)系人')
        .fontSize(16)
        .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
      Blank()
    }
    .height('100%')
    .width("100%")
    .onClick(() => {
      this.index = 1;
      this.controller.changeIndex(this.index);
    })
  }

  @Builder tabDynamic() {   // 自定義動(dòng)態(tài)標(biāo)簽
    Column() {
      Blank()
      Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
        .size({width: 25, height: 25})
      Text('動(dòng)態(tài)')
        .fontSize(16)
        .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
      Blank()
    }
    .height('100%')
    .width("100%")
    .onClick(() => {
      this.index = 2;
      this.controller.changeIndex(this.index);
    })
  }

  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End, // TabBar排列在下方
        controller: this.controller   // 綁定控制器
      }) {
        TabContent() {
          Column() {
            Text('消息')
              .fontSize(30)
          }
          .width('100%')
          .height('100%')
          .backgroundColor("#aabbcc")
        }
        .tabBar(this.tabMessage)      // 使用自定義TabBar

        TabContent() {
          Column() {
            Text('聯(lián)系人')
              .fontSize(30)
          }
          .width('100%')
          .height('100%')
          .backgroundColor("#bbccaa")
        }
        .tabBar(this.tabContract)     // 使用自定義TabBar

        TabContent() {
          Column() {
            Text('動(dòng)態(tài)')
              .fontSize(30)
          }
          .width('100%')
          .height('100%')
          .backgroundColor("#ccaabb")
        }
        .tabBar(this.tabDynamic)      // 使用自定義TabBar
      }
      .width('100%')
      .height('100%')
      .barHeight(60)
      .barMode(BarMode.Fixed)         // TabBar均分
      .onChange((index: number) => {  // 頁(yè)面切換回調(diào)
        this.index = index;
      })
    }
    .width('100%')
    .height('100%')
  }
}

寫(xiě)在最后

如果你覺(jué)得這篇內(nèi)容對(duì)你還蠻有幫助，我想邀請(qǐng)你幫我三個(gè)小忙：

  • 點(diǎn)贊，轉(zhuǎn)發(fā)，有你們的 『點(diǎn)贊和評(píng)論』，才是我創(chuàng)造的動(dòng)力。
  • 關(guān)注小編，同時(shí)可以期待后續(xù)文章ing??，不定期分享原創(chuàng)知識(shí)。
  • 想要獲取更多完整鴻蒙最新學(xué)習(xí)知識(shí)點(diǎn)，請(qǐng)移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容