仓颉鸿蒙HarmonyOS NEXT原生UI组件Column

沿垂直方向布局的容器。

子组件

可以包含子组件。

构造函数

init()

public init()

创建一个不包含子组件的Column容器。

init(() -> Unit)

public init(child: () -> Unit)

创建一个可包含子组件的Column容器。

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

init(Length, () -> Unit)

public init(space: Length, child: () -> Unit)

创建一个纵向长度为Length参数类型且可以包含子组件的Column容器。

参数名	参数类型	必填	默认值	描述
space	Length	是	-	纵向布局元素间距(单位为 vp)。
child	() -> Unit	是		Column 容器的子组件。

init(Length)

public init(space: Length)

创建一个纵向长度为Length参数类型的Column容器。

参数名	参数类型	必填	默认值	描述
space	Length	是	-	纵向布局元素间距(单位为 vp)。

init(Float64, () -> Unit)

public init(space: Float64, child: () -> Unit)

创建一个纵向长度为Float64参数类型且可以包含子组件的Column容器。

参数名	参数类型	必填	默认值	描述
space	Float64	是	-	纵向布局元素间距(单位为 vp)。
child	() -> Unit	是		Column 容器的子组件。

init(Float64)

public init(space: Float64)

创建一个纵向长度为Float64参数类型的Column容器。

参数名	参数类型	必填	默认值	描述
space	Float64	是	-	纵向布局元素间距(单位为 vp)。

init(Int64, () -> Unit)

public init(space: Int64, child: () -> Unit)

创建一个纵向长度为Int64参数类型且可以包含子组件的Column容器。

参数名	参数类型	必填	默认值	描述
space	Int64	是	-	纵向布局元素间距(单位为 vp)。
child	() -> Unit	是		Column 容器的子组件。

init(Int64)

public init(space: Int64)

创建一个纵向长度为Int64参数类型的Column容器。

参数名	参数类型	必填	默认值	描述
space	Int64	是	-	纵向布局元素间距(单位为 vp)。

函数

alignItems(HorizontalAlign)

public func alignItems(value: HorizontalAlign): This

设置 Column 子组件在水平方向上的对齐格式。

参数名	参数类型	默认值	描述
value	HorizontalAlign	-	设置子组件在水平方向上的对齐格式。

justifyContent(FlexAlign)

public func justifyContent(value: FlexAlign): This

设置 Column 子组件在垂直方向上的对齐格式。

参数名	参数类型	默认值	描述
value	FlexAlign	-	设置子组件在垂直方向上的对齐格式。

枚举说明

HorizontalAlign

HorizontalAlign 表示在水平方向的对齐方式。

枚举值	描述
Start	按照语言方向起始端对齐。
Center	居中对齐，默认对齐方式。
End	按照语言方向末端对齐。

FlexAlign

FlexAlign 表示在垂直方向的对齐方式

枚举值	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex 主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    import std.collection.*
    
    @Entry
    @Component
    class MyView {
        func build() {
            Column {
                Text("space")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                Column(5) {
                    Column()
                    .width(100.percent)
                    .height(30)
                    .backgroundColor(0xAFEEEE)
                    Column()
                    .width(100.percent)
                    .height(30)
                    .backgroundColor(0x00FFFF)
                }
                .width(90.percent)
                .height(100)
                .border(width: 1.vp)
    
                Text("alignItems(Start)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                Column {
                    Column()
                        .width(50.percent)
                        .height(30)
                        .backgroundColor(0xAFEEEE)
                    Column()
                        .width(50.percent)
                        .height(30)
                        .backgroundColor(0x00FFFF)
                }
                .alignItems(HorizontalAlign.Start)
                .width(90.percent)
                .border(width: 1.vp)
    
                Text("alignItems(End)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                Column {
                    Column()
                        .width(50.percent)
                        .height(30)
                        .backgroundColor(0xAFEEEE)
                    Column()
                        .width(50.percent)
                        .height(30)
                        .backgroundColor(0x00FFFF)
                }
                    .alignItems(HorizontalAlign.End)
                    .width(90.percent)
                    .border(width: 1.vp)
    
                Text("justifyContent(Center)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                Column {
                    Column()
                        .width(30.percent)
                        .height(30)
                        .backgroundColor(0xAFEEEE)
                    Column()
                        .width(30.percent)
                        .height(30)
                        .backgroundColor(0x00FFFF)
                }
                .height(15.percent)
                .border(width: 1.vp)
                .justifyContent(FlexAlign.Center)
    
                Text("justifyContent(End)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                Column {
                    Column()
                    .width(30.percent)
                    .height(30)
                    .backgroundColor(0xAFEEEE)
                    Column()
                    .width(30.percent)
                    .height(30)
                    .backgroundColor(0x00FFFF)
                }
                .height(15.percent)
                .border(width: 1.vp)
                .justifyContent(FlexAlign.End)
            }
            .width(100.percent)
            .padding(top: 5)
        }
        }

​

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

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