呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#优质博文 #SwiftUI #iOS #layout
SwiftUI 总觉得我在重学前端(某种意义上好像也确实是)
SwiftUI 布局 —— 对齐

AI 摘要:本文系统梳理了 SwiftUI 中的对齐 (Alignment) 概念,围绕 "以什么为对齐指南、对哪些视图进行对齐" 两个核心展开,深入介绍了对齐指南 (Alignment Guide) 的定义与自定义方法、显式值机制、特殊文本基线情况,以及在 VStack、HStack、ZStack、overlay、background、frame 等容器和修饰器中的具体表现,并通过 Layout 协议验证对齐机制,为开发者更好理解 SwiftUI 布局逻辑提供了清晰框架。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 什么是对齐 (Alignment)
• 对齐是指在布局容器中视图根据对齐指南 (Alignment Guide) 的参考点或参考线进行排列
SwiftUI 强调用两个核心问题:依据的对齐指南 + 哪些视图需要对齐

2. 对齐指南 (Alignment Guide)
• 定义:由 HorizontalAlignment 和 VerticalAlignment 构成,既可标识点也可标识线
SwiftUI 预置值如 leading、center、trailing、top、bottom 等,并可组合
• 自定义对齐指南:通过实现 AlignmentID 并扩展 HorizontalAlignment / Alignment
• alignmentGuide 修饰器:为视图指定对齐指南显式值,覆盖默认值
• 显式值机制:nil → 使用默认值;返回值 → 设置显式值,即使值等于默认值
• 特殊对齐:firstTextBaseline、lastTextBaseline 随内容情况变化
• 复合容器的显式值计算规则:取子视图中特定基线显式值的最高或最低

3. Layout 协议与显式对齐
SwiftUI 4.0 引入 Layout 协议,支持自定义布局容器
• explicitAlignment 方法允许开发者设置容器中视图的显式对齐值
• 缺省实现返回 nil,但自定义实现能验证基线计算规则
• 即使容器提供显式值,开发者仍可用 alignmentGuide 覆盖

4. 对齐适用于哪些视图
• VStack、HStack、ZStack:alignment 参数应用在子视图之间,而非子视图与容器
• 布局容器工作原理:容器计算子视图需求尺寸,于虚拟坐标系中摆放,再由父容器决定整体位置
• overlay、background:类似特殊 ZStack,主视图尺寸决定容器,附加视图按指南对齐
• frame:作为单子视图容器,强行修改建议尺寸,表现为子视图对虚拟视图对齐

5. 总结
SwiftUI 对齐的精髓在于明确“对齐指南来源”与“对齐的作用对象”
• 掌握显式值与容器布局逻辑能减少开发者对对齐偏差的困扰
• 理论掌握后在实际开发中可构建复杂灵活的自定义布局


author 东坡肘子 SwiftUI 布局 —— 对齐
 
 
Back to Top