鸿蒙多设备自适应布局
🎒 30章 · 从入门到实战
01
鸿蒙布局基础
ArkUI
认识声明式UI框架，容器与组件，线性布局Row/Column
02
弹性伸缩布局
flex
flexGrow/flexShrink/flexBasis，子组件按比例伸缩
03
百分比与权重布局
%单位 + layoutWeight，父容器空间分配
04
自适应间距与对齐
justifyContent / alignItems 动态间距
05
流式布局 FlexWrap
自动换行，适配不同屏幕宽度
06
网格布局 Grid
Grid容器 + GridItem，行列规则排列
07
栅格布局 GridRow/Col
12列栅格系统，响应式页面框架
08
层叠布局 Stack
组件堆叠，alignContent控制位置
09
绝对/相对定位
position offset/top/left 精准定位
10
列表布局 List
可滚动列表，长列表性能优化
11
滚动布局 Scroll
单方向内容滚动
12
自适应文本与字体
textOverflow / fontSizeAdaptive
13
图片自适应
Image objectFit 按比例缩放
14
媒体查询基础
@State + MediaQueryListener
15
断点设计 Breakpoint
sm/md/lg 断点，布局切换
16
自适应导航栏
底部TabBar / 侧边栏切换
17
自适应表单
输入框、按钮、选择器排列
18
自适应卡片
可伸缩卡片，适配手机/平板
19
自适应弹窗
AlertDialog/CustomDialog 居中缩放
20
自适应表格
Table 列宽自适应 + 横向滚动
21
自适应图表
Canvas/第三方库，宽窄屏重绘
22
多设备预览与调试
DevEco Studio 多设备预览
23
性能优化
减少嵌套 / LazyForEach / 避免过度渲染
24
自定义布局组件
继承Layout / 自定义Measure
25
横竖屏适配
监听旋转，动态调整布局方向
26
折叠屏适配
展开/折叠状态，无缝切换
27
平板与手机布局差异
Master-Detail 主从布局
28
自适应主题与暗黑模式
@Styles / @Extend 主题切换
29
综合实战一：商品列表页
搜索栏、筛选栏、网格/列表切换
30
综合实战二：个人中心页
头像、信息卡片、功能列表，多设备适配