HarmonyOS 6 Blank 组件使用文档

文章目录Blank 组件核心API说明1 构造方法2 布局特性完整示例代码代码模块详解1 基础左右对齐布局2 配置最小留白尺寸3 多 Blank 均分空间4 垂直方向弹性布局5 实战导航栏业务场景总结Blank 组件核心API说明1 构造方法Blank(min?: number)min可选参数设置空白区域最小预留尺寸单位 vp不传参时Blank 自动占满父容器全部剩余空间。2 布局特性嵌套在Row中控制水平方向空白填充嵌套在Column中控制垂直方向空白填充同一父容器多个Blank组件自动平分剩余空间无默认样式、无渲染内容仅做占位弹性布局。完整示例代码// xxx.ets Entry Component struct BlankDemo { build() { Column({ space: 20 }) { // 标题 Text(Blank 组件官方完整演示) .fontSize(24) .fontWeight(FontWeight.Bold) .width(100%) .textAlign(TextAlign.Center) .margin({ top: 20 }); // // 1. 基础用法左右对齐最常用场景 // Text(1. 基础用法自动填充空白) .fontSize(16) .fontColor(#666666) .width(90%); Row() { Text(左侧文字) .fontSize(18) .backgroundColor(#E5F6FF) .padding(10); // Blank自动填充剩余空间 Blank() Text(右侧文字) .fontSize(18) .backgroundColor(#E5F6FF) .padding(10); } .width(90%) .backgroundColor(#F5F5F5) .padding(10); // // 2. 设置最小宽度正确写法 // Text(2. 设置最小宽度 50vp) .fontSize(16) .fontColor(#666666) .width(90%); Row() { Text(左) .backgroundColor(#E5F6FF) .padding(10); // ✅ 正确Blank 直接传数值不传对象 Blank(50) Text(右) .backgroundColor(#E5F6FF) .padding(10); } .width(60%) .backgroundColor(#F5F5F5) .padding(10); // // 3. 多个 Blank 均分空间 // Text(3. 多个 Blank 自动均分) .fontSize(16) .fontColor(#666666) .width(90%); Row() { Text(A) .backgroundColor(#E5F6FF) .padding(10); Blank() Text(B) .backgroundColor(#E5F6FF) .padding(10); Blank() Text(C) .backgroundColor(#E5F6FF) .padding(10); } .width(90%) .backgroundColor(#F5F5F5) .padding(10); // // 4. 垂直方向 BlankColumn 中使用 // Text(4. 垂直方向 Blank上下对齐) .fontSize(16) .fontColor(#666666) .width(90%); Column() { Text(顶部内容) .backgroundColor(#E5F6FF) .padding(10); Blank() Text(底部内容) .backgroundColor(#E5F6FF) .padding(10); } .width(90%) .height(150) .backgroundColor(#F5F5F5) .padding(10); // // 5. 实战场景导航栏修复 fontColor 报错 // Text(5. 实战导航栏布局) .fontSize(16) .fontColor(#666666) .width(90%); Row() { Text(返回) .fontSize(16) .padding({ left: 10 }) .fontColor(#FFFFFF); // ✅ 字体颜色设置在 Text 上 Blank() Text(标题) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#FFFFFF); Blank() Text(更多) .fontSize(16) .padding({ right: 10 }) .fontColor(#FFFFFF); } .width(90%) .height(50) .backgroundColor(#007DFF) .borderRadius(10); } .width(100%) .backgroundColor(#FFFFFF) .height(100%); } }运行效果如图代码模块详解1 基础左右对齐布局在 Row 水平容器中单个Blank()自动填充中间剩余区域快速实现左、右元素两端对齐是开发中最高频的用法替代传统 margin 间距写法适配多尺寸设备。2 配置最小留白尺寸使用Blank(50)传入数值参数限制空白区域最小为 50vp当父容器宽度压缩时空白区域不会无限缩小保证页面布局美观不挤压。3 多 Blank 均分空间同一 Row 内放置多个无参Blank()组件自动平分所有剩余空白可快速实现多元素均匀分布排版适用于功能按钮、标签等分布局。4 垂直方向弹性布局Blank 支持在 Column 垂直容器中使用自动填充上下剩余空间实现顶部内容置顶、底部内容置底的垂直拉伸布局常用于页面内容与底部按钮分离场景。5 实战导航栏业务场景结合双 Blank 实现经典导航栏结构左侧返回、中间标题居中、右侧更多操作利用 Blank 弹性特性无需固定边距完美适配全机型宽度。总结Blank是鸿蒙轻量高效的弹性布局核心组件专注空白区域自动填充用法简单仅需一行代码即可实现复杂自适应排版降低布局开发成本示例覆盖基础用法、参数配置、多组件协作、垂直布局、项目实战五大场景代码可直接复制运行完全贴合官方文档定义可快速复用至实际项目开发。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力