UI(五)常用布局总结

自适应布局
1.1、线性布局(LinearLayout)

通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。

属性 说明
space 通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果
alignItems 设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为VerticalAlign,水平方向取值为HorizontalAlign类型
justifyContent 设置子组件在主轴上的对齐方式,实现布局的自适应均分能力,取值为FlexAlign 类型
1.2、层叠布局(StackLayout)

层叠布局用于在屏幕上预留一块区域来显示组件中的元素,提供元素可以重叠的布局,层叠布局通过层叠容器Stack实现,容器中的子元素依次入栈,后一个子元素覆盖前一个子元素显示。

层叠布局可以设置子元素在容器内的对齐方式,支持topStart(左上),Top(上中),TopEnd(右上),Start(左边),Center(中间),End(右边),BottomStart(左下),Bottom(中下),BottomEnd(右下)9中对齐方式

1.3、弹性布局(FlexLayout)

弹性布局是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列,对齐和分配空白空间。

1.4、网格布局(GridLayout)

网格布局是自适应布局中一种重要的布局,具备较强的页面均分能力和子组件占比控制能力。网格布局通过Grid容器组件和子组件GridItem实现,Grid用于设置网格布局相关参数,GridItem用于定义子组件相关特性。

1.5、响应式布局
1.5.1、栅格布局(GridRow 和GridCol)

栅格系统作为一种辅助布局定位工具,栅格组件GridRow和GridCol提供了更灵活,更全面的栅格系统实现方案。GridRow为栅格容器组件,只与栅格子组件GridCol在栅格布局场景中使用。

1.5.2、媒体查询(Media Query)

媒体查询(Media Query)作为响应式设计的核心,在移动设备上应用十分广泛,根据不同设备类型或者设备不同状态修改应用的样式。

相关推荐
程序猿追6 小时前
kotlin-retry 接入鸿蒙后,怎样确认它真的会停止重试
开发语言·kotlin·harmonyos
懿路向前9 小时前
HarmonyOS 粒子特效实战:emitter.size 是双刃剑:粒子精确定位 [0,0] 与条带随机出生(HarmonyOS)
华为·harmonyos
马剑威(威哥爱编程)9 小时前
【共创稿事节】HarmonyOS 7 Agent 开发实战 04:云端 RAG 搭企业私有知识库问答
人工智能·华为·harmonyos
贾伟康10 小时前
【晨迹相机|20】HarmonyOS ArkTS AppGallery 发布复查实战:核对包名、版本、设备、素材和离线声明
harmonyos·arkts·appgallery·发布审核·上架复查
特立独行的猫a11 小时前
用仓颉写桌面应用:从 npx 建工程到串口实时示波器
开源·harmonyos·tauri·仓颉·cj-tarui
ndsc_d12 小时前
AI生成的UI如何继续修改?画布内生成与独立AI设计工具比较
人工智能·ui·ai·ui设计·ai设计·ai设计工具·ai生成ui
懿路向前12 小时前
HarmonyOS 粒子特效实战:马赛克切块提速 17.6×~38×:desiredRegion 重复读盘与一次解码管线(HarmonyOS)
华为·harmonyos
天府云创14 小时前
Agentic开发时代到来——鸿蒙PC三大原生开发工具公测
华为·操作系统·harmonyos·鸿蒙系统·cli·deveco·agentic
程序猿追14 小时前
Fleks 鸿蒙适配:从八个小球看实体和组件的变化
华为·harmonyos
Sunny_GMF14 小时前
Markdown 导出 HTML 实战:2.6MB 编辑器快照如何瘦身 71%(DOM 净化 + CSSOM 运行时裁剪)
编辑器·html·ai编程·harmonyos