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

BisonLiu
98 阅读4分钟

沿水平方向布局的容器。

子组件

可以包含子组件。

构造函数

init()

public init()

创建一个Row容器。

init(() -> Unit)

public init(child: () -> Unit)

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

init(Length)

public init(space: Length)

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

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

init(Length, () -> Unit)

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

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

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

init(Float64)

public init(space: Float64)

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

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

init(Float64, () -> Unit)

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

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

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

init(Int64)

public init(space: Int64)

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

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

init(Int64，() -> Unit)

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

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

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

函数

alignItems(VerticalAlign)

public func alignItems(algin: VerticalAlign): This

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

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

justifyContent(FlexAlign)

public func justifyContent(algin: FlexAlign): This

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

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

枚举说明

VerticalAlign

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

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

FlexAlign

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

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

示例代码

本示例展示了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)
            }
    }

图片

​

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

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

avatar
文章
阅读
粉丝