Tabs

通過頁簽進行內容視圖切換的容器組件，每個頁簽對應一個內容視圖。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

僅可包含子組件[TabContent]。

接口

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsController]})

參數：

參數名	參數類型	必填	參數描述
barPosition	[BarPosition]	否	設置Tabs的頁簽位置。默認值：BarPosition.Start
index	number	否	設置當前顯示頁簽的索引。默認值：0說明：設置為小于0的值時按默認值顯示。可選值為[0, TabContent子節點數量-1]。設置不同值時，默認生效切換動效，可以設置animationDuration為0關閉動畫。從API version 10開始，該參數支持[$$]雙向綁定變量。
controller	[TabsController]	否	設置Tabs控制器。

BarPosition枚舉說明

名稱	描述
Start	vertical屬性方法設置為true時，頁簽位于容器左側；vertical屬性方法設置為false時，頁簽位于容器頂部。
End	vertical屬性方法設置為true時，頁簽位于容器右側；vertical屬性方法設置為false時，頁簽位于容器底部。

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數類型	描述
vertical	boolean	設置為false是為橫向Tabs，設置為true時為縱向Tabs。默認值：false
scrollable	boolean	設置為true時可以通過滑動頁面進行頁面切換，為false時不可滑動切換頁面。默認值：true
barMode	[BarMode],[ScrollableBarModeOptions]	TabBar布局模式，BarMode為必選項，ScrollableBarModeOptions為可選項，具體描述見BarMode枚舉說明、ScrollableBarModeOptions對象說明。從API version 10開始，支持ScrollableBarModeOptions參數。其中ScrollableBarModeOptions參數僅Scrollable模式下有效，非必填參數。默認值：BarMode.Fixed
barWidth	number	Length8+
barHeight	number	Length8+
animationDuration	number	點擊TabBar頁簽切換TabContent的動畫時長。不設置時，點擊TabBar頁簽切換TabContent無動畫。默認值：300說明：設置為小于0或百分比時，按默認值300ms顯示。
divider10+	[DividerStyle]	null
fadingEdge10+	boolean	設置頁簽超過容器寬度時是否漸隱消失。默認值：true
barOverlap10+	boolean	設置TabBar是否背后變模糊并疊加在TabContent之上。默認值：false
barBackgroundColor10+	[ResourceColor]	設置TabBar的背景顏色。默認值：透明
barGridAlign10+	[BarGridColumnOptions]	以柵格化方式設置TabBar的可見區域。具體參見BarGridColumnOptions對象。僅水平模式下有效，[不適用于XS、XL和XXL設備]。

DividerStyle10+對象說明

名稱	參數類型	必填	描述
strokeWidth	[Length]	是	分割線的線寬（不支持百分比設置）。
color	[ResourceColor]	否	分割線的顏色。默認值：#33182431
startMargin	[Length]	否	分割線與側邊欄頂端的距離（不支持百分比設置）。默認值：0.0 單位：vp
endMargin	[Length]	否	分割線與側邊欄底端的距離（不支持百分比設置）。默認值：0.0 單位：vp

BarGridColumnOptions10+對象說明

名稱	參數類型	必填	描述
margin	[Dimension]	否	網格模式下的column邊距（不支持百分比設置）。默認值:24.0 單位：vp
gutter	[Dimension]	否	網格模式下的column間隔（不支持百分比設置）。默認值:24.0 單位：vp
sm	number	否	小屏下，頁簽占用的columns數量，必須是非負偶數。小屏為大于等于320vp但小于600vp。默認值為-1，代表頁簽占用TabBar全部寬度。
md	number	否	中屏下，頁簽占用的columns數量，必須是非負偶數。中屏為大于等于600vp但小于800vp。默認值為-1，代表頁簽占用TabBar全部寬度。
lg	number	否	大屏下，頁簽占用的columns數量，必須是非負偶數。大屏為大于等于840vp但小于1024vp。默認值為-1，代表頁簽占用TabBar全部寬度。

ScrollableBarModeOptions10+對象說明

名稱	參數類型	必填	描述
margin	[Dimension]	否	Scrollable模式下的TabBar的左右邊距（不支持百分比設置）。默認值：0.0 單位：vp
nonScrollableLayoutStyle	[LayoutStyle]	否	Scrollable模式下不滾動時的頁簽排布方式。默認值：LayoutStyle.ALWAYS_CENTER

BarMode枚舉說明

名稱	描述
Scrollable	每一個TabBar均使用實際布局寬度，超過總長度（橫向Tabs的barWidth，縱向Tabs的barHeight）后可滑動。
Fixed	所有TabBar平均分配barWidth寬度（縱向時平均分配barHeight高度）。

LayoutStyle10+枚舉說明

名稱	描述
ALWAYS_CENTER	當頁簽內容超過TabBar寬度時，TabBar可滾動。當頁簽內容不超過TabBar寬度時，TabBar不可滾動，頁簽緊湊居中。
ALWAYS_AVERAGE_SPLITE	當頁簽內容超過TabBar寬度時，TabBar可滾動。當頁簽內容不超過TabBar寬度時，TabBar不可滾動，且所有頁簽平均分配TabBar寬度。僅水平模式下有效，否則視為LayoutStyle.ALWAYS_CENTER。
SPACE_BETWEEN_OR_CENTER	當頁簽內容超過TabBar寬度時，TabBar可滾動。當頁簽內容不超過TabBar寬度但超過TabBar寬度一半時，TabBar不可滾動，頁簽緊湊居中。當頁簽內容不超過TabBar寬度一半時，TabBar不可滾動，保證頁簽居中排列在TabBar寬度一半，且間距相同。

事件

除支持[通用事件]外，還支持以下事件：

名稱	功能描述
onChange(event: (index: number) => void)	Tab頁簽切換后觸發的事件。 - index：當前顯示的index索引，索引從0開始計算。觸發該事件的條件： 1、TabContent支持滑動時，組件觸發滑動時觸發。 2、通過[控制器]API接口調用。 3、通過[狀態變量]構造的屬性值進行修改。 4、通過頁簽處點擊觸發。
onTabBarClick(event: (index: number) => void)10+	Tab頁簽點擊后觸發的事件。 - index：被點擊的index索引，索引從0開始計算。觸發該事件的條件：通過頁簽處點擊觸發。

TabsController

Tabs組件的控制器，用于控制Tabs組件進行頁簽切換。不支持一個TabsController控制多個Tabs組件。

導入對象

let controller: TabsController = new TabsController()

changeIndex

changeIndex(value: number): void

控制Tabs切換到指定頁簽。

參數：

參數名	參數類型	必填	參數描述`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`
value	number	是	頁簽在Tabs里的索引值，索引值從0開始。說明：設置小于0或大于最大數量的值時，該事件失效。

示例

示例1

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.TabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.TabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.TabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.TabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) = > {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

tabs2

示例2

// xxx.ets
@Entry
@Component
struct TabsDivider1 {
  private controller1: TabsController = new TabsController()
  @State dividerColor: string = 'red'
  @State strokeWidth: number = 2
  @State startMargin: number = 0
  @State endMargin: number = 0
  @State nullFlag: boolean = false

  build() {
    Column() {
      Tabs({ controller: this.controller1 }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Red)
        }.tabBar('red')
      }
      .vertical(true)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .barWidth(70)
      .barHeight(200)
      .animationDuration(400)
      .onChange((index: number) = > {
        console.info(index.toString())
      })
      .height('200vp')
      .margin({ bottom: '12vp' })
      .divider(this.nullFlag ? null : {
        strokeWidth: this.strokeWidth,
        color: this.dividerColor,
        startMargin: this.startMargin,
        endMargin: this.endMargin
      })

      Button('常規Divider').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          this.nullFlag = false;
          this.strokeWidth = 2;
          this.dividerColor = 'red';
          this.startMargin = 0;
          this.endMargin = 0;
        })
      Button('空Divider').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          this.nullFlag = true
        })
      Button('顏色變為藍色').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          this.dividerColor = 'blue'
        })
      Button('寬度增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          this.strokeWidth += 2
        })
      Button('寬度減小').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          if (this.strokeWidth > 2) {
            this.strokeWidth -= 2
          }
        })
      Button('上邊距增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          this.startMargin += 2
        })
      Button('上邊距減少').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          if (this.startMargin > 2) {
            this.startMargin -= 2
          }
        })
      Button('下邊距增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          this.endMargin += 2
        })
      Button('下邊距減少').width('100%').margin({ bottom: '12vp' })
        .onClick(() = > {
          if (this.endMargin > 2) {
            this.endMargin -= 2
          }
        })
    }.padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

tabs3

示例3

// xxx.ets
@Entry
@Component
struct TabsOpaque {
  @State message: string = 'Hello World'
  private controller: TabsController = new TabsController()
  private controller1: TabsController = new TabsController()
  @State selfFadingFade: boolean = true;
  build() {
    Column() {
      Button('子頁簽設置漸隱').width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          this.selfFadingFade = true;
        })
      Button('子頁簽設置不漸隱').width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          this.selfFadingFade = false;
        })
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(80)
      .animationDuration(400)
      .onChange((index: number) = > {
        console.info(index.toString())
      })
      .fadingEdge(this.selfFadingFade)
      .height('30%')
      .width('100%')
      Tabs({ barPosition: BarPosition.Start, controller: this.controller1 }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(true)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(200)
      .barWidth(80)
      .animationDuration(400)
      .onChange((index: number) = > {
        console.info(index.toString())
      })
      .fadingEdge(this.selfFadingFade)
      .height('30%')
      .width('100%')
    }
    .padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

tabs4

示例4

// xxx.ets
@Entry
@Component
struct barBackgroundColorTest {
  private controller: TabsController = new TabsController()
  @State barOverlap: boolean = true;
  @State barBackgroundColor: string = '#88888888';

  build() {
    Column() {
      Button("barOverlap變化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          if (this.barOverlap) {
            this.barOverlap = false;
          } else {
            this.barOverlap = true;
          }
        })

      Tabs({ barPosition: BarPosition.Start, index: 0, controller: this.controller }) {
        TabContent() {
          Column() {
            Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
            Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
          }.width('100%').width('100%').height('100%')
          .backgroundColor(Color.Pink)
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "1"))

        TabContent() {
          Column() {
            Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
            Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
          }.width('100%').width('100%').height('100%')
          .backgroundColor(Color.Yellow)
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "2"))

        TabContent() {
          Column() {
            Text(`barOverlap ${this.barOverlap}`).fontSize(16).margin({ top: this.barOverlap ? '56vp' : 0 })
            Text(`barBackgroundColor ${this.barBackgroundColor}`).fontSize(16)
          }.width('100%').width('100%').height('100%')
          .backgroundColor(Color.Green)
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), "3"))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .height('60%')
      .barOverlap(this.barOverlap)
      .scrollable(true)
      .animationDuration(10)
      .barBackgroundColor(this.barBackgroundColor)
    }
    .height(500)
    .padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

tabs5

示例5

// xxx.ets
@Entry
@Component
struct TabsExample5 {
  private controller: TabsController = new TabsController()
  @State gridMargin: number = 10
  @State gridGutter: number = 10
  @State sm: number = -2
  @State clickedContent: string = "";

  build() {
    Column() {
      Row() {
        Button("gridMargin+10 " + this.gridMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.gridMargin += 10
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("gridMargin-10 " + this.gridMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.gridMargin -= 10
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("gridGutter+10 " + this.gridGutter)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.gridGutter += 10
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("gridGutter-10 " + this.gridGutter)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.gridGutter -= 10
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("sm+2 " + this.sm)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.sm += 2
          })
          .margin({ right: '6%' })
        Button("sm-2 " + this.sm).width('47%').height(50).margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.sm -= 2
          })
      }

      Text("點擊內容:" + this.clickedContent).width('100%').height(200).margin({ top: 5 })


      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "2"))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
      }
      .width('350vp')
      .animationDuration(300)
      .height('60%')
      .barGridAlign({ sm: this.sm, margin: this.gridMargin, gutter: this.gridGutter })
      .backgroundColor(0xf1f3f5)
      .onTabBarClick((index: number) = > {
        this.clickedContent += "now index " + index + " is clickedn";
      })
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('10vp')
  }
}

tabs5

示例6

// xxx.ets
@Entry
@Component
struct TabsExample6 {
  private controller: TabsController = new TabsController()
  @State scrollMargin: number = 0
  @State layoutStyle: LayoutStyle = LayoutStyle.ALWAYS_CENTER
  @State text: string = "文本"

  build() {
    Column() {
      Row() {
        Button("scrollMargin+10 " + this.scrollMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.scrollMargin += 10
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("scrollMargin-10 " + this.scrollMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.scrollMargin -= 10
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("文本增加 ")
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.text += '文本增加'
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("文本重置")
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.text = "文本"
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("layoutStyle.ALWAYS_CENTER")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) = > {
            this.layoutStyle = LayoutStyle.ALWAYS_CENTER;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("layoutStyle.ALWAYS_AVERAGE_SPLIT")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) = > {
            this.layoutStyle = LayoutStyle.ALWAYS_AVERAGE_SPLIT;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("layoutStyle.SPACE_BETWEEN_OR_CENTER")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) = > {
            this.layoutStyle = LayoutStyle.SPACE_BETWEEN_OR_CENTER;
          })
          .margin({ bottom: '12vp' })
      }

      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(SubTabBarStyle.of(this.text))
      }
      .animationDuration(300)
      .height('60%')
      .backgroundColor(0xf1f3f5)
      .barMode(BarMode.Scrollable, { margin: this.scrollMargin, nonScrollableLayoutStyle: this.layoutStyle })
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('24vp')
  }
}

tabs5

審核編輯黃宇

聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。舉報投訴

組件

組件

+關注

關注
1

文章
513

瀏覽量
17854
鴻蒙

鴻蒙

+關注

關注
57

文章
2371

瀏覽量
42910

HarmonyOS應用開發實戰-容器組件tabs

tab-bar。的子組件，用來展示tab的標簽區，子組件排列方式為橫向排列。除支持通用屬性外，還支持如下屬性：3. tab-content。的子組件，用來展示tab的內容區，高度默認充滿ta

發表于 11-16 16:36

鴻蒙ArkUI開發-Tabs組件的使用

鴻蒙ArkUI開發-Tabs組件的使用

發表于 01-19 16:01 ?1954次閱讀

鴻蒙ArkTS容器組件：Column

沿垂直方向布局的容器。

發表于 07-05 16:32 ?480次閱讀

鴻蒙ArkTS容器組件：Flex

以彈性方式布局子組件的容器組件。

發表于 07-08 10:19 ?532次閱讀

鴻蒙ArkTS容器組件：GridCol

柵格子組件，必須作為柵格容器組件([GridRow])的子組件使用。

發表于 07-08 15:17 ?430次閱讀

鴻蒙ArkTS容器組件：GridItem

網格容器中單項內容容器。

發表于 07-09 09:25 ?436次閱讀

鴻蒙ArkTS容器組件：Navigator

路由容器組件，提供路由跳轉能力。

發表于 07-10 14:55 ?444次閱讀

鴻蒙ArkTS容器組件：Refresh

可以進行頁面下拉操作并顯示刷新動效的容器組件。

發表于 07-11 16:11 ?546次閱讀

鴻蒙ArkTS容器組件：RowSplit

將子組件橫向布局，并在每個子組件之間插入一根縱向的分割線。

發表于 07-11 22:25 ?357次閱讀

鴻蒙ArkTS容器組件：Scroll

可滾動的容器組件，當子組件的布局尺寸超過父組件的尺寸時，內容可以滾動。

發表于 07-12 15:24 ?1263次閱讀

鴻蒙ArkTS容器組件：SideBarContainer

提供側邊欄可以顯示和隱藏的側邊欄容器，通過子組件定義側邊欄和內容區，第一個子組件表示側邊欄，第二個子組件表示內容區。

發表于 07-18 15:46 ?575次閱讀

鴻蒙ArkTS容器組件：Stack

堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件。

發表于 07-15 18:23 ?908次閱讀

鴻蒙ArkTS容器組件：Swiper

滑塊視圖容器，提供子組件滑動輪播顯示的能力。

發表于 07-15 09:51 ?689次閱讀

鴻蒙ArkTS容器組件：TabContent

僅在Tabs中使用，對應一個切換頁簽的內容視圖。

發表于 07-15 15:04 ?639次閱讀

鴻蒙ArkTS容器組件：WaterFlow

瀑布流容器，由“行”和“列”分割的單元格所組成，通過容器自身的排列規則，將不同大小的“項目”自上而下，如瀑布般緊密布局。

發表于 07-15 17:35 ?458次閱讀

色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

搜索歷史

鴻蒙ArkTS容器組件：Tabs

Tabs

子組件

接口

BarPosition枚舉說明

屬性

DividerStyle10+對象說明

BarGridColumnOptions10+對象說明

ScrollableBarModeOptions10+對象說明

BarMode枚舉說明

LayoutStyle10+枚舉說明

事件

TabsController

導入對象

changeIndex

示例

示例1

示例2

示例3

示例4

示例5

示例6

評論

HarmonyOS應用開發實戰-容器組件tabs

鴻蒙ArkUI開發-Tabs組件的使用

鴻蒙ArkTS容器組件：Column

鴻蒙ArkTS容器組件：Flex

鴻蒙ArkTS容器組件：GridCol

鴻蒙ArkTS容器組件：GridItem

鴻蒙ArkTS容器組件：Navigator

鴻蒙ArkTS容器組件：Refresh

鴻蒙ArkTS容器組件：RowSplit

鴻蒙ArkTS容器組件：Scroll

鴻蒙ArkTS容器組件：SideBarContainer

鴻蒙ArkTS容器組件：Stack

鴻蒙ArkTS容器組件：Swiper

鴻蒙ArkTS容器組件：TabContent

鴻蒙ArkTS容器組件：WaterFlow