仅在Tabs中使用，对应一个切换页签的内容视图。
说明
TabContent暂不支持混合页面场景。
子组件
支持单个子组件。构造函数
init(() -> Unit)
public init(child: () -> Unit)创建一个包含子组件的TabContent容器。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
child | () -> Unit | 否 | { => } | 声明容器内的子组件。 |
函数
tabBar(String)
public func tabBar(content: String): This设置TabBar上显示内容。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
content | String | 是 | - | 设置TabBar上显示内容。 |
tabBar(CJResource)
public func tabBar(content: CJResource): This设置TabBar上显示内容。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
content | CJResource | 是 | - | TabBar上显示内容。 |
tabBar(String, String)
public func tabBar(icon!: String, text!: String): This设置TabBar上显示内容。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
icon | String | 是 | - | TabBar上显示的图标。 说明： 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
text | String | 是 | - | TabBar上显示的文字内容。 |
tabBar(CJResource, String)
public func tabBar(icon!: CJResource, text!: String): This设置TabBar上显示内容。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
icon | CJResource | 是 | - | 设置TabBar上显示内容。 说明： 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
text | String | 是 | - | TabBar上显示的文字内容。 |
tabBar(String, CJResource)
public func tabBar(icon!: String, text!: CJResource): This设置TabBar上显示内容。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
icon | String | 是 | - | 设置TabBar上显示内容。 说明： 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
text | CJResource | 是 | - | TabBar上显示的文字内容。 |
tabBar(CJResource, CJResource)
public func tabBar(icon!: CJResource, text!: CJResource): This设置TabBar上显示内容。
说明
TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
不支持触摸热区设置。参数名 | 参数类型 | 必填 | 默认值 | 描述 |
icon | CJResource | 是 | - | 设置TabBar上显示内容。 说明： 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
text | CJResource | 是 | - | TabBar上显示的文字内容。 |
事件
tabBar(() -> Unit)
public func tabBar(callback: () -> Unit): This生成用户自定义组件。
事件名 | 参数类型 | 描述 |
tabBar | () -> Unit | 生成用户自定义组件，在使用时结合@Builder使用。具体用法见@Builder |
通用属性/通用事件
通用属性：除文本样式外，其余全部支持。
通用事件：全部支持。
示例代码
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
@Entry
@Component
class MyView {
var controller: TabsController = TabsController()
@State var currentIndex: Int32 = 0
func build() {
Column() {
Tabs(BarPosition.Start, this.controller) {
TabContent {
Column() {
Text("Tab${this.currentIndex + 1}")
.textAlign(TextAlign.Center)
.fontSize(50)
.fontColor(0x182431)
.opacity(0.4)
.height(100.percent)
}
.width(100.percent)
.height(100.percent)
}
.tabBar(icon: "/resources/base/media/public_icon_on.svg", text: "Tab1")
.id("tab0")
TabContent {
Column() {
Text("Tab${this.currentIndex + 1}")
.textAlign(TextAlign.Center)
.fontSize(50)
.fontColor(0x182431)
.opacity(0.4)
.height(100.percent)
}
.width(100.percent)
.height(100.percent)
}
.tabBar(icon: "/resources/base/media/public_icon_on.svg", text: "Tab2")
.id("tab1")
TabContent() {
Column() {
Text("Tab${this.currentIndex + 1}")
.textAlign(TextAlign.Center)
.fontSize(50)
.fontColor(0x182431)
.opacity(0.4)
.height(100.percent)
}
.width(100.percent)
.height(100.percent)
}
.tabBar(icon: "/resources/base/media/public_icon_on.svg", text: "Tab3")
.id("tab2")
TabContent() {
Column() {
Text("Tab${this.currentIndex + 1}")
.textAlign(TextAlign.Center)
.fontSize(50)
.fontColor(0x182431)
.opacity(0.4)
.height(100.percent)
}
.width(100.percent)
.height(100.percent)
}
.tabBar(icon: "/resources/base/media/public_icon_on.svg", text: "Tab4")
.id("tab3")
}
.vertical(false)
.scrollable(true)
.barMode(BarMode.Fixed)
.barWidth(100.percent)
.barHeight(70)
.animationDuration(400)
.width(100.percent)
.backgroundColor(0xF5F5F5)
.onChange({index: Int32 => this.currentIndex = index})
}
.width(100.percent)
.height(300)
.margin(top: 5)
}
}
如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！
