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

做过移动端的朋友应该都知道这个组件的含金量，90%的App都需要用到这个组件，非常的重要！希望大家认真学习(＾Ｕ＾)ノ~ＹＯ

一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

说明

Tabs暂不支持混合页面场景。

子组件

包含子组件 TabContent。

构造函数

init(() -> Unit)

public init(
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
child	() -> Unit	否		声明容器内的子组件。

init(Int32, () -> Unit)

public init(
        index: Int32,
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
index	Int32	否	0	指定初次初始页签索引。
child	() -> Unit	否		声明容器内的子组件。

init(BarPosition, () -> Unit)

public init(
        barPosition: BarPosition,
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
barPosition	BarPosition	否	BarPosition.Start	指定页签位置来创建Tabs容器组件。
child	() -> Unit	否		声明容器内的子组件。

init(TabsController, () -> Unit)

public init(
        controller: TabsController,
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
controller	TabsController	否	TabsController()	设置Tabs控制器。
child	() -> Unit	否		声明容器内的子组件。

init(BarPosition, Int32, () -> Unit)

public init(
        barPosition: BarPosition,
        index: Int32,
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
barPosition	BarPosition	否	BarPosition.Start	指定页签位置来创建Tabs容器组件。
index	Int32	否	0	指定初次初始页签索引。
child	() -> Unit	否		声明容器内的子组件。

init(TabsController, Int32, () -> Unit)

public init(
        controller: TabsController,
        index: Int32,
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
controller	TabsController	否	TabsController()	设置 Tabs 控制器。
index	Int32	否	0	指定初次初始页签索引。
child	() -> Unit	否		声明容器内的子组件。

init(BarPosition, TabsController, () -> Unit)

public init(
        barPosition: BarPosition,
        controller: TabsController,
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
barPosition	BarPosition	否	BarPosition.Start	指定页签位置来创建 Tabs 容器组件。
controller	TabsController	否	TabsController()	设置 Tabs 控制器。
child	() -> Unit	否		声明容器内的子组件。

init(BarPosition, TabsController, Int32, () -> Unit)

public init(
        barPosition: BarPosition,
        controller: TabsController,
        index: Int32,
        child: () -> Unit
    )

创建一个Tabs容器。

参数名	参数类型	必填	默认值	描述
barPosition	BarPosition	否	BarPosition.Start	指定页签位置来创建 Tabs 容器组件。
controller	TabsController	否	TabsController()	设置 Tabs 控制器。
index	Int32	否	0	指定初次初始页签索引。
child	() -> Unit	否		声明容器内的子组件。

函数

vertical(Bool)

public func vertical(isVertical: Bool): This

是否为纵向 Tab。

参数名	参数类型	必填	默认值	描述
isVertical	Bool	是	-	是否为纵向 Tab。

scrollable(Bool)

public func scrollable(isScrollable: Bool): This

是否可以通过左右滑动进行页面切换。

参数名	参数类型	必填	默认值	描述
isScrollable	Bool	是	-	是否可以通过左右滑动进行页面切换。

barMode(BarMode)

public func barMode(mode: BarMode): This

设置布局模式。

参数名	参数类型	必填	默认值	描述
mode	BarMode	是	-	TabBar 布局模式。

barWidth(Length)

public func barWidth(width: Length): This

TabBar 的宽度值。

参数名	参数类型	必填	默认值	描述
width	Length	是	-	TabBar 的宽度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

barWidth(Float64)

public func barWidth(width: Float64): This

TabBar 的宽度值。

参数名	参数类型	必填	默认值	描述
width	Float64	是	-	TabBar 的宽度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

barWidth(Int64)

public func barWidth(width: Int64): This

TabBar的宽度值。

参数名	参数类型	必填	默认值	描述
width	Int64	是	-	TabBar 的宽度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

barWidth(CJResource)

public func barWidth(width: CJResource): This

TabBar的宽度值。

参数名	参数类型	必填	默认值	描述
width	CJResource	是	-	TabBar 的宽度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

barHeight(Length)

public func barHeight(height: Length): This

TabBar的高度值。

参数名	参数类型	必填	默认值	描述
height	Length	是	-	TabBar 的高度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

barHeight(Float64)

public func barHeight(height: Float64): This

TabBar的高度值。

参数名	参数类型	必填	默认值	描述
height	Float64	是	-	TabBar 的高度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

barHeight(Int64)

public func barHeight(height: Int64): This

TabBar的高度值。

参数名	参数类型	必填	默认值	描述
height	Int64	是	-	TabBar 的高度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

barHeight(CJResource)

public func barHeight(height: CJResource): This

TabBar的高度值。

参数名	参数类型	必填	默认值	描述
height	CJResource	是	-	TabBar 的高度值（参数使用 Int64 或 Float64 时，单位默认为 vp）。

animationDuration(Float32)

public func animationDuration(duration: Float32): This

滑动动画时长。

参数名	参数类型	必填	默认值	描述
duration	Float32	是	-	TabContent 滑动动画时长。

animationDuration(Int32)

public func animationDuration(duration: Int32): This

滑动动画时长。

说明

Tabs组件的宽高默认为 100%，如不设置宽高，则默认占满整个屏幕。

参数名	参数类型	必填	默认值	描述
duration	Int32	是	-	TabContent 滑动动画时长。

自定义枚举类型

BarPosition

页签位置。

枚举值	描述
Start	vertical 属性方法设置为 true 时，页签位于容器左侧；vertical 属性方法设置为 false 时，页签位于容器顶部。
End	vertical 属性方法设置为 true 时，页签位于容器右侧；vertical 属性方法设置为 false 时，页签位于容器底部。

BarMode

页签宽度分布方式。

枚举值	描述
Fixed	所有 TabBar 平均分配宽度。
Scrollable	TabBar 使用实际布局宽度, 超过总长度后可滑动。

构造函数

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页签切换。

构造函数

init()

public init()

创建一个tabs控制器。

函数

changeIndex(Int32)

public func changeIndex(index: Int32): Unit

控制Tabs切换到指定页签。

参数名	参数类型	必填	默认值	描述
index	Int32	是	-	页签在Tabs里的索引值，索引值从0开始。

事件

onChange((Int32) -> Unit)

public func onChange(callback: (Int32) -> Unit): This

Tab页签切换后触发的事件。

事件名	参数类型	描述
onChange	(Int32) -> Unit	按钮点击事件回调，回调参数为切换后的index。

通用属性/通用事件

通用属性：除文本样式外，其余全部支持。

通用事件：全部支持。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    @Entry
    @Component
    class MyView {
        var controller: TabsController = TabsController()
        func build() {
            Column() {
                Tabs(BarPosition.Start, this.controller) {
                    TabContent {
                        Column()
                        .width(100.percent)
                        .height(100.percent)
                        .backgroundColor(0xFFC0CB)
                    }
                    .tabBar("pink")
    
                    TabContent {
                        Column()
                        .width(100.percent)
                        .height(100.percent)
                        .backgroundColor(0xFFFF00)
                    }
                    .tabBar("yellow")
    
                    TabContent() {
                        Column()
                        .width(100.percent)
                        .height(100.percent)
                        .backgroundColor(Color.BLUE)
                    }
                    .tabBar("blue")
    
                    TabContent() {
                        Column()
                        .width(100.percent)
                        .height(100.percent)
                        .backgroundColor(Color.GREEN)
                    }
                    .tabBar("green")
                }
                .vertical(true)
                .scrollable(true)
                .barMode(BarMode.Fixed)
                .barWidth(70)
                .barHeight(150)
                .animationDuration(400)
                .onChange({index: Int32 =>
                    nativeLog("${index}")
                })
                .width(90.percent)
                .backgroundColor(0xF5F5F5)
            }
            .width(100.percent)
            .height(150)
            .margin(top: 5)
        }
    }

还没有申请仓颉内测资格的朋友可以看一下下面这篇文章

华为仓颉编程语言内测申请攻略《附带仓颉鸿蒙开发权限》

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

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

posted @ 2024-12-23 20:17 BisonLiu 阅读(23) 评论(0) 收藏举报

刷新页面返回顶部

_Bison

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

公告