切換頁簽的內(nèi)容視圖

2024-01-22 17:59 更新

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

說明

該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

支持單個子組件。

說明

可內(nèi)置系統(tǒng)組件和自定義組件，支持渲染控制類型（if/else、ForEach和LazyForEach）。

接口

TabContent()

屬性

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

名稱

參數(shù)類型

描述

tabBar

string | Resource | {

icon?: string | Resource,

text?: string |Resource

}

| CustomBuilder8+

設(shè)置TabBar上顯示內(nèi)容。

CustomBuilder: 構(gòu)造器，內(nèi)部可以傳入組件（API8版本以上適用）。

說明：

如果icon采用svg格式圖源，則要求svg圖源刪除其自有寬高屬性值。如采用帶有自有寬高屬性的svg圖源，icon大小則是svg本身內(nèi)置的寬高屬性值大小。

tabBar9+

SubTabBarStyle | BottomTabBarStyle

設(shè)置TabBar上顯示內(nèi)容。

SubTabBarStyle: 子頁簽樣式，參數(shù)為文字。

BottomTabBarStyle: 底部頁簽和側(cè)邊頁簽樣式，參數(shù)為文字和圖片。

說明：

底部樣式?jīng)]有下劃線效果。icon異常時顯示灰色圖塊。

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

SubTabBarStyle9+

子頁簽樣式。

constructor9+

constructor(content: string | Resource)

SubTabBarStyle的構(gòu)造函數(shù)。

參數(shù)：

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

content

string | Resource

是

頁簽內(nèi)的文字內(nèi)容。

BottomTabBarStyle9+

底部頁簽和側(cè)邊頁簽樣式。

constructor9+

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

BottomTabBarStyle的構(gòu)造函數(shù)。

參數(shù)：

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

icon

string | Resource

是

頁簽內(nèi)的圖片內(nèi)容。

text

string | Resource

是

頁簽內(nèi)的文字內(nèi)容。

示例

示例1：

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabContentExample {
  5.   @State fontColor: string = '#182431'
  6.   @State selectedFontColor: string = '#007DFF'
  7.   @State currentIndex: number = 0
  8.   private controller: TabsController = new TabsController()
  9. 

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

  25.   build() {
  26.     Column() {
  27.       Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  28.         TabContent() {
  29.           Column() {
  30.             Text('Tab1')
  31.               .fontSize(36)
  32.               .fontColor('#182431')
  33.               .fontWeight(500)
  34.               .opacity(0.4)
  35.               .margin({ top: 30, bottom: 56.5 })
  36.             Divider()
  37.               .strokeWidth(0.5)
  38.               .color('#182431')
  39.               .opacity(0.05)
  40.           }.width('100%')
  41.         }.tabBar(this.TabBuilder(0))
  42. 

  43.         TabContent() {
  44.           Column() {
  45.             Text('Tab2')
  46.               .fontSize(36)
  47.               .fontColor('#182431')
  48.               .fontWeight(500)
  49.               .opacity(0.4)
  50.               .margin({ top: 30, bottom: 56.5 })
  51.             Divider()
  52.               .strokeWidth(0.5)
  53.               .color('#182431')
  54.               .opacity(0.05)
  55.           }.width('100%')
  56.         }.tabBar(this.TabBuilder(1))
  57. 

  58.         TabContent() {
  59.           Column() {
  60.             Text('Tab3')
  61.               .fontSize(36)
  62.               .fontColor('#182431')
  63.               .fontWeight(500)
  64.               .opacity(0.4)
  65.               .margin({ top: 30, bottom: 56.5 })
  66.             Divider()
  67.               .strokeWidth(0.5)
  68.               .color('#182431')
  69.               .opacity(0.05)
  70.           }.width('100%')
  71.         }.tabBar(this.TabBuilder(2))
  72. 

  73.         TabContent() {
  74.           Column() {
  75.             Text('Tab4')
  76.               .fontSize(36)
  77.               .fontColor('#182431')
  78.               .fontWeight(500)
  79.               .opacity(0.4)
  80.               .margin({ top: 30, bottom: 56.5 })
  81.             Divider()
  82.               .strokeWidth(0.5)
  83.               .color('#182431')
  84.               .opacity(0.05)
  85.           }.width('100%')
  86.         }.tabBar(this.TabBuilder(3))
  87.       }
  88.       .vertical(false)
  89.       .barHeight(56)
  90.       .onChange((index: number) => {
  91.         this.currentIndex = index
  92.       })
  93.       .width(360)
  94.       .height(190)
  95.       .backgroundColor('#F1F3F5')
  96.       .margin({ top: 38 })
  97.     }.width('100%')
  98.   }
  99. }

示例2：

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabContentExample {
  5.   @State fontColor: string = '#182431'
  6.   @State selectedFontColor: string = '#007DFF'
  7.   @State currentIndex: number = 0
  8.   private controller: TabsController = new TabsController()
  9. 

  10.   @Builder TabBuilder(index: number) {
  11.     Column() {
  12.       Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
  13.         .width(24)
  14.         .height(24)
  15.         .margin({ bottom: 4 })
  16.         .objectFit(ImageFit.Contain)
  17.       Text('Tab')
  18.         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
  19.         .fontSize(10)
  20.         .fontWeight(500)
  21.         .lineHeight(14)
  22.     }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  23.   }
  24. 

  25.   build() {
  26.     Column() {
  27.       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
  28.         TabContent()
  29.           .tabBar(this.TabBuilder(0))
  30.         TabContent()
  31.           .tabBar(this.TabBuilder(1))
  32.         TabContent()
  33.           .tabBar(this.TabBuilder(2))
  34.         TabContent()
  35.           .tabBar(this.TabBuilder(3))
  36.       }
  37.       .vertical(true)
  38.       .barWidth(96)
  39.       .barHeight(414)
  40.       .onChange((index: number) => {
  41.         this.currentIndex = index
  42.       })
  43.       .width(96)
  44.       .height(414)
  45.       .backgroundColor('#F1F3F5')
  46.       .margin({ top: 52 })
  47.     }.width('100%')
  48.   }
  49. }

示例3：

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabBarStyleExample {
  5.   build() {
  6.     Column({ space: 5 }) {
  7.       Text("子頁簽樣式")
  8.       Column() {
  9.         Tabs({ barPosition: BarPosition.Start }) {
  10.           TabContent() {
  11.             Column().width('100%').height('100%').backgroundColor(Color.Pink)
  12.           }.tabBar(new SubTabBarStyle('Pink'))
  13. 

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

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

  22.           TabContent() {
  23.             Column().width('100%').height('100%').backgroundColor(Color.Green)
  24.           }.tabBar(new SubTabBarStyle('Green'))
  25.         }
  26.         .vertical(false)
  27.         .scrollable(true)
  28.         .barMode(BarMode.Fixed)
  29.         .onChange((index: number) => {
  30.           console.info(index.toString())
  31.         })
  32.         .width('100%')
  33.         .backgroundColor(0xF1F3F5)
  34.       }.width('100%').height(200)
  35.       Text("底部頁簽樣式")
  36.       Column() {
  37.         Tabs({ barPosition: BarPosition.End }) {
  38.           TabContent() {
  39.             Column().width('100%').height('100%').backgroundColor(Color.Pink)
  40.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
  41. 

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

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

  50.           TabContent() {
  51.             Column().width('100%').height('100%').backgroundColor(Color.Green)
  52.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
  53.         }
  54.         .vertical(false)
  55.         .scrollable(true)
  56.         .barMode(BarMode.Fixed)
  57.         .onChange((index: number) => {
  58.           console.info(index.toString())
  59.         })
  60.         .width('100%')
  61.         .backgroundColor(0xF1F3F5)
  62.       }.width('100%').height(200)
  63.       Text("側(cè)邊頁簽樣式")
  64.       Column() {
  65.         Tabs({ barPosition: BarPosition.Start }) {
  66.           TabContent() {
  67.             Column().width('100%').height('100%').backgroundColor(Color.Pink)
  68.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
  69. 

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

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

  78.           TabContent() {
  79.             Column().width('100%').height('100%').backgroundColor(Color.Green)
  80.           }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
  81.         }
  82.         .vertical(true).scrollable(true).barMode(BarMode.Fixed)
  83.         .onChange((index: number) => {
  84.           console.info(index.toString())
  85.         })
  86.         .width('100%')
  87.         .backgroundColor(0xF1F3F5)
  88.       }.width('100%').height(400)
  89.     }
  90.   }
  91. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號