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)作为响应式设计的核心,在移动设备上应用十分广泛,根据不同设备类型或者设备不同状态修改应用的样式。

相关推荐
不爱吃糖的程序媛1 小时前
OpenHarmony 工程结构剖析
harmonyos
I'm Jie4 小时前
Swagger UI 本地化部署,解决 FastAPI Swagger UI 依赖外部 CDN 加载失败问题
python·ui·fastapi·swagger·swagger ui
爱学习的程序媛5 小时前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
爱学习的程序媛6 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
紫丁香6 小时前
Selenium自动化测试详解1
python·selenium·测试工具·ui
GISer_Jing6 小时前
前端组件库——shadcn/ui:轻量、自由、可拥有,解锁前端组件库的AI时代未来
前端·人工智能·ui
小白学鸿蒙6 小时前
使用Flutter从0到1构建OpenHarmony/HarmonyOS应用
flutter·华为·harmonyos
HarmonyOS_SDK7 小时前
接口高效调用,实现应用内无感促评
harmonyos
江澎涌8 小时前
鸿蒙动态导入实战
android·typescript·harmonyos
大雷神8 小时前
HarmonyOS APP<玩转React>开源教程二十:收藏功能实现
前端·react.js·开源·harmonyos