TabContent

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

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

子組件

支持單個子組件。

說明：
可內置系統組件和自定義組件，支持渲染控制類型（[if/else]、[ForEach]和[LazyForEach]）。

接口

TabContent()

屬性

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

名稱	參數類型	描述
tabBar	string	[Resource]
tabBar9+	[SubTabBarStyle]	[BottomTabBarStyle]

說明：
TabContent組件不支持設置通用寬度屬性，其寬度默認撐滿Tabs父組件。
TabContent組件不支持設置通用高度屬性，其高度由Tabs父組件高度與TabBar組件高度決定。
vertical屬性為false值，交換上述2個限制。
TabContent組件不支持內容過長時頁面的滑動，如需頁面滑動，可嵌套List使用。

SubTabBarStyle9+

子頁簽樣式。

constructor

constructor(content: string | Resource)

SubTabBarStyle的構造函數。

參數：

參數名	參數類型	必填	參數描述
content	string	[Resource]	是

of10+

static of(content: ResourceStr)

SubTabBarStyle的靜態構造函數。

參數：

參數名	參數類型	必填	參數描述
content	[ResourceStr]	是	頁簽內的文字內容。

屬性

支持以下屬性：

名稱	參數類型	描述
indicator10+	[IndicatorStyle]	設置選中子頁簽的下劃線風格。子頁簽的下劃線風格僅在水平模式下有效。
selectedMode10+	[SelectedMode]	設置選中子頁簽的顯示方式。默認值：SelectedMode.INDICATOR
board10+	[BoardStyle]	設置選中子頁簽的背板風格。子頁簽的背板風格僅在水平模式下有效。
labelStyle10+	[LabelStyle]	設置子頁簽的label文本和字體的樣式。
padding10+	[Padding]	[Dimension]

IndicatorStyle10+對象說明

名稱	參數類型	必填	描述
color	[ResourceColor]	否	下劃線的顏色和背板顏色。默認值:#FF007DFF
height	[Length]	否	下劃線的高度（不支持百分比設置）。默認值:2.0 單位：vp
width	[Length]	否	下劃線的寬度（不支持百分比設置）。默認值：0.0 單位：vp說明：寬度設置為0時，按頁簽文本寬度顯示。
borderRadius	[Length]	否	下劃線的圓角半徑（不支持百分比設置）。默認值：0.0 單位：vp
marginTop	[Length]	否	下劃線與文字的間距（不支持百分比設置）。默認值：8.0 單位：vp

SelectedMode10+枚舉說明

名稱	描述
INDICATOR	使用下劃線模式。
BOARD	使用背板模式。

BoardStyle10+對象說明

名稱	參數類型	必填	描述
borderRadius	[Length]	否	背板的圓角半徑（不支持百分比設置）。默認值：8.0 單位：vp

LabelStyle10+對象說明

名稱	參數類型	必填	描述
overflow	[TextOverflow]	否	設置Label文本超長時的顯示方式。默認值是省略號截斷。
maxLines	number	否	設置Label文本的最大行數。如果指定此參數，則文本最多不會超過指定的行。如果有多余的文本，可以通過textOverflow來指定截斷方式。默認值是1。
minFontSize	number	[ResourceStr]	否
maxFontSize	number	[ResourceStr]	否
heightAdaptivePolicy	[TextHeightAdaptivePolicy]	否	設置Label文本自適應高度的方式。默認值是最大行數優先。
font	[Font]	否	設置Label文本字體樣式。當頁簽為子頁簽時，默認值是字體大小16.0fp、字體類型'HarmonyOS Sans'，字體風格正常，字重正常。當頁簽為底部頁簽時，默認值是字體大小10.0fp、字體類型'HarmonyOS Sans'，字體風格正常，字重中等。

BottomTabBarStyle9+

底部頁簽和側邊頁簽樣式。

constructor

constructor(icon: string | Resource, content: string | Resource)

BottomTabBarStyle的構造函數。

參數：

參數名	參數類型	必填	參數描述
icon	string	[Resource]	是
text	string	[Resource]	是

of10+

static of(icon: ResourceStr, text: ResourceStr) BottomTabBarStyle的靜態構造函數。

參數：

參數名	參數類型	必填	參數描述
icon	[ResourceStr]	是	頁簽內的圖片內容。
text	[ResourceStr]	是	頁簽內的文字內容。

屬性

支持以下屬性：

名稱	參數類型	描述
padding10+	[Padding]	[Dimension]
verticalAlign10+	[VerticalAlign]	設置底部頁簽的圖片、文字在垂直方向上的對齊格式。默認值：VerticalAlign.Center
layoutMode10+	[LayoutMode]	設置底部頁簽的圖片、文字排布的方式，具體參照LayoutMode枚舉。默認值：LayoutMode.VERTICAL
symmetricExtensible10+	boolean	設置底部頁簽的圖片、文字是否可以對稱借左右底部頁簽的空余位置中的最小值，僅fixed水平模式下在底部頁簽之間有效。默認值：false
labelStyle10+	[LabelStyle]	設置子頁簽的label文本和字體的樣式。

LayoutMode10+枚舉說明

名稱	描述
AUTO	若頁簽寬度大于104vp，頁簽內容為左右排布，否則頁簽內容為上下排布。僅TabBar為垂直模式或Fixed水平模式時有效。
VERTICAL	頁簽內容上下排布。
HORIZONAL	頁簽內容左右排布。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

示例

示例1

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

  @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column() {
            Text('Tab1')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(0))

        TabContent() {
          Column() {
            Text('Tab2')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(1))

        TabContent() {
          Column() {
            Text('Tab3')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(2))

        TabContent() {
          Column() {
            Text('Tab4')
              .fontSize(36)
              .fontColor('#182431')
              .fontWeight(500)
              .opacity(0.4)
              .margin({ top: 30, bottom: 56.5 })
            Divider()
              .strokeWidth(0.5)
              .color('#182431')
              .opacity(0.05)
          }.width('100%')
        }.tabBar(this.TabBuilder(3))
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) = > {
        this.currentIndex = index
      })
      .width(360)
      .height(190)
      .backgroundColor('#F1F3F5')
      .margin({ top: 38 })
    }.width('100%')
  }
}

tabContent

示例2

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

  @Builder TabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text('Tab')
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent()
          .tabBar(this.TabBuilder(0))
        TabContent()
          .tabBar(this.TabBuilder(1))
        TabContent()
          .tabBar(this.TabBuilder(2))
        TabContent()
          .tabBar(this.TabBuilder(3))
      }
      .vertical(true)
      .barWidth(96)
      .barHeight(414)
      .onChange((index: number) = > {
        this.currentIndex = index
      })
      .width(96)
      .height(414)
      .backgroundColor('#F1F3F5')
      .margin({ top: 52 })
    }.width('100%')
  }
}

tabContent

示例3

// xxx.ets
@Entry
@Component
struct TabBarStyleExample {
  build() {
    Column({ space: 5 }) {
      Text("子頁簽樣式")
      Column() {
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(new SubTabBarStyle('Pink'))

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

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

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(new SubTabBarStyle('Green'))
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) = > {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(200)
      Text("底部頁簽樣式")
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) = > {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(200)
      Text("側邊頁簽樣式")
      Column() {
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Blue)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Green)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
        }
        .vertical(true).scrollable(true).barMode(BarMode.Fixed)
        .onChange((index: number) = > {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(400)
    }
  }
}

tabbarStyle

示例4

// xxx.ets
@Entry
@Component
struct TabsAttr {
  private controller: TabsController = new TabsController()
  @State indicatorColor: Color = Color.Blue;
  @State indicatorWidth: number = 40;
  @State indicatorHeight: number = 10;
  @State indicatorBorderRadius: number = 5;
  @State indicatorSpace: number = 10;
  @State subTabBorderRadius: number = 20;
  @State selectedMode: SelectedMode = SelectedMode.INDICATOR;
  private colorFlag: boolean = true;
  private widthFlag: boolean = true;
  private heightFlag: boolean = true;
  private borderFlag: boolean = true;
  private spaceFlag: boolean = true;

  build() {
    Column() {
      Button("下劃線顏色變化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          // 對Button組件的寬高屬性進行動畫配置
          if (this.colorFlag) {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorColor = Color.Red
            })
          } else {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorColor = Color.Yellow
            })
          }
          this.colorFlag = !this.colorFlag
        })
      Button("下劃線高度變化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          // 對Button組件的寬高屬性進行動畫配置
          if (this.heightFlag) {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorHeight = 20
            })
          } else {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorHeight = 10
            })
          }
          this.heightFlag = !this.heightFlag
        })
      Button("下劃線寬度變化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          // 對Button組件的寬高屬性進行動畫配置
          if (this.widthFlag) {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorWidth = 30
            })
          } else {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorWidth = 50
            })
          }
          this.widthFlag = !this.widthFlag
        })
      Button("下劃線圓角半徑變化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          // 對Button組件的寬高屬性進行動畫配置
          if (this.borderFlag) {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorBorderRadius = 0
            })
          } else {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorBorderRadius = 5
            })
          }
          this.borderFlag = !this.borderFlag
        })
      Button("下劃線間距變化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) = > {
          // 對Button組件的寬高屬性進行動畫配置
          if (this.spaceFlag) {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorSpace = 20
            })
          } else {
            animateTo({
              duration: 1000, // 動畫時長
              curve: Curve.Linear, // 動畫曲線
              delay: 200, // 動畫延遲
              iterations: 1, // 播放次數
              playMode: PlayMode.Normal, // 動畫模式
              onFinish: () = > {
                console.info('play end')
              }
            }, () = > {
              this.indicatorSpace = 10
            })
          }
          this.spaceFlag = !this.spaceFlag
        })
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp')
        }.tabBar(SubTabBarStyle.of('pink')
          .indicator({
            color: this.indicatorColor, //下劃線顏色
            height: this.indicatorHeight, //下劃線高度
            width: this.indicatorWidth, //下劃線寬度
            borderRadius: this.indicatorBorderRadius, //下劃線圓角半徑
            marginTop: this.indicatorSpace //下劃線與文字間距
          })
          .selectedMode(this.selectedMode)
          .board({ borderRadius: this.subTabBorderRadius })
          .labelStyle({})
        )

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

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

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

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp')
        }.tabBar('gray')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp')
        }.tabBar('orange')
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(140)
      .animationDuration(400)
      .onChange((index: number) = > {
        console.info(index.toString())
      })
      .backgroundColor(0xF5F5F5)
      .height(320)
    }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

tabContent3

示例5

// xxx.ets
@Entry
@Component
struct TabsTextOverflow {
  @State message: string = 'Hello World'
  private controller: TabsController = new TabsController()
  @State subTabOverflowOpaque: boolean = true;
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column(){
            Text('單行省略號截斷').fontSize(30).fontColor(0xFF000000)
          }.width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of('開始【單行省略號截斷單行省略號截斷單行省略號截斷單行省略號截斷單行省略號截斷單行省略號截斷單行省略號截斷單行省略號截斷單行省略號截斷單行省略號截斷】結束')
          .labelStyle({ overflow: TextOverflow.Ellipsis, maxLines: 1, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,
            font: { size: 20 } }))
        TabContent() {
          Column()
          {
            Text('先縮小再截斷').fontSize(30).fontColor(0xFF000000)
          }.width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of('開始【先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷先縮小再截斷】結束')
          .labelStyle({ overflow: TextOverflow.Clip, maxLines: 1, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
            font: { size: 20 } }))
        TabContent() {
          Column(){
            Text('先縮小再換行再截斷').fontSize(30).fontColor(0xFF000000)
          }.width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of('開始【先縮小再換行再截斷先縮小再換行再截斷先縮小再換行再截斷先縮小再換行再截斷先縮小再換行再截斷先縮小再換行再截斷先縮小再換行再截斷先縮小再換行再截斷】結束')
          .labelStyle({ overflow: TextOverflow.Clip, maxLines: 2, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST,
            font: { size: 20 } }))
        TabContent() {
          Column() {
            Text('換行').fontSize(30).fontColor(0xFF000000)
          }
          .width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of('開始【換行換行換行換行換行換行換行換行換行換行換行換行換行換行換行】結束')
          .labelStyle({ overflow: TextOverflow.Clip, maxLines: 10, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST,
            font: { size: 20 } }))
      }
      .vertical(true).scrollable(true)
      .barMode(BarMode.Fixed)
      .barHeight(720)
      .barWidth(200).animationDuration(400)
      .onChange((index: number) = > {
        console.info(index.toString())
      })
      .height('100%').width('100%')
    }
    .height('100%')
  }
}

tabContent4

示例6

// xxx.ets
@Entry
@Component
struct TabContentExample6 {
  private controller: TabsController = new TabsController()
  @State text: string = "2"
  @State tabPadding: number = 0;
  @State symmetricExtensible: boolean = false;
  @State layoutMode: LayoutMode = LayoutMode.VERTICAL;
  @State verticalAlign: VerticalAlign = VerticalAlign.Center;

  build() {
    Column() {
      Row() {
        Button("padding+10 " + this.tabPadding)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.tabPadding += 10
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("padding-10 " + this.tabPadding)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.tabPadding -= 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 = "2"
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("symmetricExtensible改變 " + this.symmetricExtensible)
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.symmetricExtensible = !this.symmetricExtensible
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("layoutMode垂直 ")
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.layoutMode = LayoutMode.VERTICAL;
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button("layoutMode水平 ")
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.layoutMode = LayoutMode.HORIZONTAL;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("verticalAlign朝上")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.verticalAlign = VerticalAlign.Top;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("verticalAlign居中")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.verticalAlign = VerticalAlign.Center;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button("verticalAlign朝下")
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) = > {
            this.verticalAlign = VerticalAlign.Bottom;
          })
          .margin({ bottom: '12vp' })
      }


      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"), this.text)
          .padding(this.tabPadding)
          .verticalAlign(this.verticalAlign)
          .layoutMode(this.layoutMode)
          .symmetricExtensible(this.symmetricExtensible))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
      }
      .animationDuration(300)
      .height('60%')
      .backgroundColor(0xf1f3f5)
      .barMode(BarMode.Fixed)
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('24vp')
  }
}