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

原创

Bison丶 2024-12-23 20:53:02 ©著作权

文章标签 参数类型默认值 Text 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者Bison丶的原创作品，请联系作者获取转载授权，否则将追究法律责任

沿水平方向布局的容器。

子组件

可以包含子组件。

构造函数

init()

public init()

创建一个Row容器。

init(() -> Unit)

public init(child: () -> Unit)

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

init(Length)

public init(space: Length)

创建一个使用Length类型指定横向布局元素间距的Row容器。

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

init(Length, () -> Unit)

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

创建一个使用Length类型指定横向布局元素间距的Row容器，并声明容器内子组件。

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

init(Float64)

public init(space: Float64)

创建一个使用Float64类型指定横向布局元素间距的Row容器。

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

init(Float64, () -> Unit)

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

创建一个使用Float64类型指定横向布局元素间距的Row容器，并声明容器内子组件。

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

init(Int64)

public init(space: Int64)

创建一个使用 Int64类型指定横向布局元素间距的Row容器，并声明容器内子组件。

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

init(Int64，() -> Unit)

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

创建一个使用 Int64类型指定横向布局元素间距的Row容器，并声明容器内子组件。

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

函数

alignItems(VerticalAlign)

public func alignItems(algin: VerticalAlign): This

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

参数名	参数类型	必填	默认值	描述
algin	VerticalAlign	是	-	在垂直方向上子组件的对齐格式。

justifyContent(FlexAlign)

public func justifyContent(algin: FlexAlign): This

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

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

枚举说明

VerticalAlign

VerticalAlign表示子组件在垂直方向上的对齐格式。

枚举值	描述
Top	顶部对齐。
Center	居中对齐，默认对齐方式。
Bottom	底部对齐。

FlexAlign

VerticalAlign表示子组件在水平方向上的对齐格式。

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

示例代码

本示例展示了Row设置alignItems和justifyContent属性的用法。

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    @Entry
    @Component
    class MyView {
        func build() {
                Column(5) {
                // 设置子组件水平方向的间距为5
                    Text("space")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                    Row(5) {
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0xAFEEEE)
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0x00FFFF)
                    }
                    .width(90.percent)
                    .height(107)
                    .border(width: 1.vp)
    
                    // 设置子元素垂直方向对齐方式
                    Text("alignItems(Bottom)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                    Row() {
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0xAFEEEE)
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0x00FFFF)
                    }
                    .alignItems(VerticalAlign.Bottom)
                    .width(90.percent)
                    .height(15.percent)
                    .border(width: 1.vp)
    
                    Text("alignItems(Center)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                    Row() {
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0xAFEEEE)
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0x00FFFF)
                    }
                    .alignItems(VerticalAlign.Center)
                    .width(90.percent)
                    .height(15.percent)
                    .border(width: 1.vp)
    
                  // 设置子元素水平方向对齐方式
                    Text("justifyContent(End)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                    Row() {
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0xAFEEEE)
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0x00FFFF)
                    }
                    .height(15.percent)
                    .width(90.percent)
                    .border(width: 1.vp)
                    .justifyContent(FlexAlign.End)
    
                    Text("justifyContent(Center)")
                    .fontSize(9)
                    .fontColor(0xCCCCCC)
                    .width(90.percent)
                    Row() {
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0xAFEEEE)
                        Row()
                        .width(30.percent)
                        .height(50)
                        .backgroundColor(0x00FFFF)
                    }
                    .width(90.percent)
                    .border(width: 1.vp)
                    .justifyContent(FlexAlign.Center)
                }
                .width(100.percent)
                .padding(top: 5)
            }
    }

华为仓颉鸿蒙HarmonyOS NEXT原生UI容器组件Row_参数类型