HarmonyOS NEXT鸿蒙开发ArkUI:Blank空白填充组件(搭配Row、Column、Flex布局)

介绍

空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为 Row、Column、Flex 时生效。

  • Blank 在父容器 Row、Column、Flex主轴方向上未设置大小时会自动拉伸、压缩,设置了大小或容器自适应子节点大小时不会自动拉伸、压缩。
  • Blank 设置主轴方向大小(size)与 min 时约束关系为 max(min, size)。
  • Blank 在父容器交叉轴上设置大小时不会撑满父容器交叉轴,交叉轴不设置大小时 alignSelf 默认值为 ItemAlign.Stretch,会撑满容器交叉轴。

注意

要有 空余空间 才能生效,即:可能需要设置 宽度、高度 100%

接口

Blank(min?: number | string)

参数:

  • min:number、string,空白填充组件在容器主轴上的最小大小。默认值:0,不支持设置百分比。

属性

设置空白填充的填充颜色。

color(value: ResourceColor)

参数:

  • value:ResourceColor 类型,必填,空白填充的填充颜色。默认值:Color.Transparent

例子

如下图:使用空白填充组件,占满 Row 布局的空余空间,将开关按钮挤到最右侧

// xxx.ets
@Entry
@Component
struct BlankExample {
    build() {
        Column() {
            Row() {
                Text('Bluetooth')
                    .fontSize(18)
                Blank() // 占满空余空间,将开关按钮挤到最右侧,有空余空间才生效,所以需要设置Row的宽度 100%
                Toggle({
                    type: ToggleType.Switch
                }).
                margin({
                    top: 14,
                    bottom: 14,
                    left: 6,
                    right: 6
                })
            }
            .width('100%') // 有空余空间,Blank() 占满空余空间 才生效
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .padding({
                left: 12
            })
        }
        .backgroundColor(0xEFEFEF)
        .padding(20)
    }
}

原文出处:/show_1GW2FsawLrQe.html