华为仓颉鸿蒙HarmonyOS NEXT原生UI容器组件TabContent

仅在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)
        }
    }

---

​

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191” 备注cangjie