HarmonyOS ArkTS Blank基本使用（十九）-编程知识

HarmonyOS ArkTS Blank基本使用（十九）

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

接口

Blank(min?: number | string)

从API version 9开始，该接口支持在ArkTS卡片中使用。

在这里插入图片描述

示例1：

Blank组件在横竖屏占满空余空间效果。

// xxx.ets
@Entry
@Component
struct BlankExample {build() {Column() {Row() {Text('Bluetooth').fontSize(18)Blank()Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })}.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })}.backgroundColor(0xEFEFEF).padding(20)}
}

在这里插入图片描述

示例2

Blank组件的父组件未设置宽度时，min参数的使用效果。

// xxx.ets
@Entry
@Component
struct BlankExample {build() {Column({ space: 20 }) {// blank父组件不设置宽度时，Blank失效，可以通过设置min最小宽度填充固定宽度Row() {Text('Bluetooth').fontSize(18)Blank().color(Color.Yellow)Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })Row() {Text('Bluetooth').fontSize(18)// 设置最小宽度为160Blank('160').color(Color.Yellow)Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })}.backgroundColor(0xEFEFEF).padding(20).width('100%')}
}