鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Blank组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Blank组件

一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+

二、Blank组件

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

子组件

接口

Blank(min?: number | string)

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

参数

参数名

参数类型

必填

参数描述

min

number | string

空白填充组件在容器主轴上的最小大小。

默认值:0

说明:

不支持设置百分比。负值使用默认值。当最小值大于容器可用空间时,使用最小值作为自身大小并超出容器。

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

color

ResourceColor

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

默认值:Color.Transparent

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

事件

支持通用事件

示例

代码
// 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)
        // 设置最小宽度为160
        Blank('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%')
  }
}

图例

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马?
惟有点赞加关注大军。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-12 09:00:02       91 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-12 09:00:02       97 阅读
  3. 在Django里面运行非项目文件

    2024-02-12 09:00:02       78 阅读
  4. Python语言-面向对象

    2024-02-12 09:00:02       88 阅读

热门阅读

  1. 我为什么选择Xamarin开发ios app安卓app

    2024-02-12 09:00:02       43 阅读
  2. Day42- 动态规划part10 一、买卖股票的最佳时机

    2024-02-12 09:00:02       62 阅读
  3. Scrum敏捷培训机构推荐

    2024-02-12 09:00:02       56 阅读
  4. rust入门学习---所有权

    2024-02-12 09:00:02       56 阅读
  5. Rust引用、借用和所有权详解

    2024-02-12 09:00:02       55 阅读
  6. django中如何使用mysql连接池

    2024-02-12 09:00:02       57 阅读
  7. 探索设计模式:原型模式深入解析

    2024-02-12 09:00:02       59 阅读
  8. Web课程学习笔记--jsonp的原理与简单实现

    2024-02-12 09:00:02       66 阅读
  9. Git Push -f 命令详解

    2024-02-12 09:00:02       57 阅读