Tabs
1.1概念
- Tabs 視圖切換容器，通過相適應的頁簽進行視圖頁面的切換的容器組件
- 每一個頁簽對應一個內容視圖
- Tabs擁有一種唯一的子集元素TabContent
1.2子組件
- 不支持自定義組件為子組件，僅可包含子組件TabContent，以及渲染控制類型 if/else 和 ForEach 并且 if/else 和ForEach下頁僅支持TabContent，不支持自定義組件
1.2.1TabContent
- 有幾個頁簽就寫入幾個TabContent
- 和build一樣，只能有唯一一個子組件
1.3參數（接口）
Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})
Tabs({//默認的頁面索引index: 0, // 頁簽的位置barPosition: BarPosition.End,// controller: 控制器，控制頁簽樣式controller: this.TabController}) {//有幾個頁簽就寫幾個TabContent//和build一樣只能有一個唯一的子組件TabContent() {}}
| 參數名 | 參數類型 |
|---|---|
| barPosition | BarPosition |
| index | Number |
| controller | TabsController |
- barPosition：設置頁簽位置，（配合vertical屬性一并使用）
- index：起始索引，設置當前視圖頁簽的索引，默認是0
- controller：Tabs控制器
1.3.1 BarPosition枚舉
| 名稱 | 描述 |
|---|---|
| Start | vertical屬性方法設置為true時，頁簽位于容器左側； vertical屬性方法設置為false時，頁簽為容器頂部 |
| End | vertical屬性方法設置為true時，頁簽位于容器右側； vertical屬性方法設置為false時，頁簽為容器底部 |
注意：屬性vertical（value：boolean）：vertical默認值為false，表示內容頁和導航欄垂直方向排列
1.3.2 Controller 頁面控制器
-
自定義：
private TabController: TabsController = new TabsController()
1.4屬性
vertical ( boolean )
- 默認值：false，設置頁簽位置
scrollable : boolean
- 設置是否可以通過滑動頁面進行頁面的切換
BarMode
- 設置TabBar布局模式
- fixed
- Scrollable：每一個TabBar均使用實際的布局寬度，超過總長度（橫向的tabs的barWidth，縱向的tabs的barHeight）可滑動
2.1代碼
@Entry
@Component
struct Test01 {@State message: string = 'Hello World';// 當前頁簽的索引@State CurrentIndex: number = 0private TabController: TabsController = new TabsController()private scroller: Scroller = new Scroller();/**滾動條的滾動范圍是父級的高度* 滾動條的高度 =父級的高度/x x=內容區域的高度/父級的高度* Scroll* 可滾動的容器組件，* 當子組件的布局尺寸超過父組件的尺寸時，內容可以滾動* 滾動的前提：主軸方向上的大小小于內容大小* 參數：* scroller：可滾動組件的控制器，用于與可滾動的組件進行綁定** 屬性：* scrollable：設置滾動的方向，默認值ScrollDirection.Vertical* scrollBar：設置滾動條的狀態，默認值BarState.Auto* on 默認開啟 off：默認關閉 Auto：視情況出現* scrollBarWidth（）；滾動條的寬度* scrollBarColor（）：設置滾動條顏色** 建議：在最外層用Scroll，防止內容超出頁面** */build() {Column() {Scroll(){Row() {this.tab('賬號登錄', 0)this.tab('短信登錄', 1)this.tab('短信登錄', 2)this.tab('短信登錄', 3)}}.scrollable(ScrollDirection.Horizontal)// tab控制器Tabs({ controller: this.TabController }) {TabContent() {Column() {Scroll() {Text('第一頁').backgroundColor(Color.Red).height(10000)}}.width('100%').height(500)}.backgroundColor(Color.Pink)TabContent() {Text('第二頁')}}// .barWidth().barHeight(0)// 捕獲視圖的的行為 onChange只有一個參數，對于不同的組件具有不同的意義// 該index表示為當前視圖的索引.onChange((index) => {this.CurrentIndex = index})}}@Buildertab(tabName: string, tabIndex: number) {Row() {Text(tabName).border({width: { bottom: this.CurrentIndex === tabIndex ? 2 : 0 },color: Color.Blue})}.onClick(() => {// 點擊目標頁簽后，讓當前的頁簽索引等于目標頁簽的索引this.CurrentIndex = tabIndexthis.TabController.changeIndex(this.CurrentIndex)}).width(120).height(30)}
}
)
