[HarmonyOS][K老师]鸿蒙中如何实现垂直的三栏布局?
原创
13758 浏览 398 点赞 0 收藏
在鸿蒙中实现垂直三栏布局(标题-空白-按钮):
核心需求是:顶部固定标题,底部固定按钮,中间区域无内容但需占满所有剩余高度空间。
以下是推荐的实现方式:
- 使用 Blank 组件将 Blank 组件放置在标题和按钮之间。Blank 是空白占位组件,默认具有弹性填充特性,会自动拉伸占据父容器所有可用剩余空间。这是最简洁直接的方案。
- 使用 Column 组件 + layoutWeight 属性将标题、空白区域(可用 Blank 或空 Column/Row 等容器)、按钮放在一个 Column(垂直布局容器)中。为中间代表空白区域的组件设置 layoutWeight(1)。此属性会使该组件按权重分配剩余空间(权重为1表示占据全部剩余空间),从而实现高度填充。
- 使用 Flex 组件将整个布局视为一个主轴(direction: FlexDirection.Column)为垂直方向的 Flex 容器。将标题、空白区域、按钮作为子项放入。为中间的空白区域子项设置 flexGrow(1)(或结合 flexShrink)。flexGrow(1) 指示该子项拉伸增长以填充剩余空间。
方案特点:
- Blank: 最简洁高效,专为填充空白设计。
- Column + layoutWeight: 适用于 Column 布局中按权重分配空间的场景,中间区域不限于 Blank。
- Flex: 提供最灵活的弹性布局控制(flexGrow, flexShrink, flexBasis),适合复杂需求。
三种方式均能有效实现中间区域占满剩余高度的核心目标。
©本站发布的所有内容,包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等,除特别标明外,均来源于网络或用户投稿,版权归原作者或原出处所有。我们致力于保护原作者版权,若涉及版权问题,请及时联系我们进行处理。
分类
HarmonyOS
标签
HarmonyOS
K老师
鸿蒙三栏布局
暂无评论数据
发布
相关推荐
以技术破局,以生态赋能|IAM亮相鸿蒙智选峰会,X5Ultra引领智家健康新趋势
云上修代码
2171
0鸿蒙智选720智能空气净化器铂境Pro Max亮相鸿蒙峰会 以硬核科技定义智慧健康新标杆
快乐编译者
1168
0华为全场景亮相AWE 2026:华为鸿蒙智家 智慧全生态重塑未来家
2030
0华为鸿蒙智家技术升级,多款新品亮相AWE2026
老李的控制台
1202
0微信鸿蒙版 App 扫码登录手表端要求公布,手机系统需升级至 HarmonyOS 6.0.0.130 及以上版本
1361
0K老师
大家好我是K老师,这是我的个人介绍:鸿蒙先锋,鸿蒙开发者达人,鸿蒙应用架构师,HDG组织者,可0-1开发纯血鸿蒙应用,可0-1开发前端加鸿蒙混合应用,可0-1开发PC端鸿蒙应用。
118
帖子
0
提问
1412
粉丝
最新发布
[HarmonyOS][K老师]鸿蒙中主线程与子线程通信机制详解,Emitter,Worker,EventHandler和EventRunner。
2026-01-28 11:31:47 发布[HarmonyOS][K老师]鸿蒙大文件上传方案。
2026-01-28 10:30:53 发布热门推荐