第7课：布局排版
进度 0/30
📐
布局排版
让元素排得又整齐又好看
📖知识引入
📏Flex布局：排队大法
手机界面最常用的排法：横着排（一行按钮）、竖着排（朋友圈动态）。就像排队做操：横排竖排、对齐站位，全靠口令。
💨间距：让界面呼吸
元素挤成一团会「透不过气」。留出8、16、24这样的间距，界面立刻清爽。记住：留白不是浪费，是呼吸感。
🎯对齐：整齐的秘密
左对齐、居中对齐、右对齐——一个页面对齐方式要统一。杂乱的对齐会让页面显得像没写完的作业。
👍拇指热区
单手玩手机时，拇指最容易点到的是屏幕下半部分。重要按钮放下面、放大点——大按钮是对拇指的温柔。
📱适配各种屏幕
手机有大有小，界面要能自动伸缩：用比例而不是固定尺寸，别让你的APP在大屏上像邮票、小屏上像放大镜。
💡
布局口诀：横竖排队、留足间距、对齐统一、按钮够大！
🔍同一个页面的两种排法
// React Native 的 Flex 布局：让按钮横着排
<View style={{
flexDirection: "row", // 横着排队（column 是竖排）
justifyContent: "space-around", // 水平均匀分布
gap: 16, // 按钮之间留 16 的间距
}}>
<Button title="开始" />
<Button title="暂停" />
<Button title="重置" />
</View>一个登录页，排法不同，效果天差地别：
❌ 拥挤版： ┌────────────┐ │账号[____] │ │密码[____]登录│ │注册忘记密码？│ └────────────┘ （挤成一团，按钮小得点不中）
✅ 舒服版： ┌────────────┐ │ │ │ 账号 │ │ [______] │ │ │ │ 密码 │ │ [______] │ │ │ │ [ 登录 ] │ │ 注册 | 忘记密码│ └────────────┘ （间距充足、上下对齐、按钮大）
同样的元素，只改了布局， 体验就差了一个档次！
🎯小测验
第1题：想让三个按钮横向均匀排成一行，该设置什么？
第2题：重要的大按钮最好放在屏幕什么位置？
第3题：界面元素「留白」的作用是？
📝本课知识点
- ✓Flex布局：row横排、column竖排
- ✓留白提供呼吸感
- ✓一个页面对齐方式要统一
- ✓重要按钮放在拇指热区
- ✓用比例适配不同屏幕
第7课完成！继续探索下一课吧 🚀