51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
视频课免费课排行榜短视频直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

ArkUI应用开发笔记[1]——Blank空白填充组件的使用 原创

离北况归
发布于 2023-9-17 19:58
浏览
0收藏

笔者一直以来以OpenHarmony南向开发为主，随着北向开发api越来越丰富且越来越趋于稳定，笔者决定恢复一度中断的北向开发之旅…

  • 以此系列文章记录学习经验，对官方文档中没有提到的地方自己做的一些补充，对于文章疏漏的地方，希望读者批评指正

目录

Blank空白填充组件介绍

1.空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。

  • 这里的主轴包括X轴和Y轴ArkUI应用开发笔记[1]——Blank空白填充组件的使用-鸿蒙开发者社区

2.仅当父组件为Row/Column时生效。

  • （Flex组件官方文档中是被提到的）官方文档ArkUI应用开发笔记[1]——Blank空白填充组件的使用-鸿蒙开发者社区
  • 实测在api 3.2.12.5中会提示报错，是不能在Felx组件中使用的 ArkUI应用开发笔记[1]——Blank空白填充组件的使用-鸿蒙开发者社区

3.官方文档仓库 Blank空白填充组件

容器水平方向上使用Blank空白填充组件

ArkUI应用开发笔记[1]——Blank空白填充组件的使用-鸿蒙开发者社区

  • 生效条件
    • 仅当父组件为Row时生效。
    • 且Row组件一定要声明宽度属性
@Entry
@Component
struct Index {

  build() {
    Row() {
      
      Column() {
        
        Blank()
        
        Row() {
          Blank()
          Text('abc').fontSize(50)
          Blank()
          Text("123").fontSize(50)
          Blank()
        }.width('100%')
        
        Blank()
        
      }
      .width('100%')
      .height('100%')

    }
    .width('100%')
    .height('100%')
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

容器垂直上使用Blank空白填充组件

ArkUI应用开发笔记[1]——Blank空白填充组件的使用-鸿蒙开发者社区

  • 生效条件
    • 仅当父组件为Column时生效。
    • 且Row组件一定要声明高度属性
@Entry
@Component
struct Index {

  build() {
    Row() {

      Column() {

        Blank()

        Text('abc').fontSize(50)

        Blank()

        Text("123").fontSize(50)

        Blank()
      }
      .height('100%')

    }
    .width('100%')
    .height('100%')
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

开发小tips

  • 在设置中开发者选项开启显示边界布局，可以方便调试组件布局
    ArkUI应用开发笔记[1]——Blank空白填充组件的使用-鸿蒙开发者社区

  • OpenHarmony 终端截屏命令

snapshot_display

  • 1.

ArkUI应用开发笔记[1]——Blank空白填充组件的使用-鸿蒙开发者社区

参考资料

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
分类
卡片开发
三方库
标签
空白填充组件
已于2023-10-8 12:06:44修改
赞 1
收藏
回复
举报
1
回复
    相关推荐
    离北况归
    这个用户很懒，还没有个人简介
    帖子
    视频
    声望
    粉丝
    最近发布
    热门推荐
    OpenHarmony 交叉编译rockchip MPP库 0回复
    【有奖互动活动】# HarmonyOS 连接·突破# 我在现场活动​ 96回复
    聊聊 2025 年最值得关注的 IT 技术趋势，一起来投票！ 14回复
    鸿蒙Flutter开发知识地图 0回复
    鸿蒙性能优化之卡顿优化 1回复
    相关问题
    HarmonyOS ArkUI中Column、Row、Flex组件中使用Blank不支持子组件 1回答
    Blank组件有什么作用，怎样使用? 1回答
    HarmonyOS Web对about:blank组件拦截 1回答
    使用Web组件加载网页，显示空白。 1回答
    #鸿蒙学习大百科#如何使用Blank组件的拉伸能力？ 1回答
    社区精华内容

    目录