前端学SwiftUI第2篇：使用画布来开发
内容提要
本文介绍了如何使用SwiftUI创建和组合视图，包括修正文本和布局、修改文字颜色、添加纵向布局、调整文本对齐方式以及添加图片和设置圆角效果。
延伸解读
从HTML到SwiftUI：布局思维的转换
文章将VStack类比为HTML中的div，这有助于前端开发者快速理解SwiftUI的纵向布局。但需注意，SwiftUI的布局系统基于堆栈和修饰符，与CSS的盒模型和流式布局有本质区别。VStack默认按子视图顺序垂直排列，且修饰符如padding作用于整个堆栈，而非单个子视图。理解这种差异能避免直接套用Web布局经验时产生的困惑。
可视化编辑与代码的对应关系
文中多次使用control+command点击视图或修饰符来调出菜单，这展示了Xcode预览与代码的联动。通过可视化操作修改Label、颜色或嵌入VStack，代码会同步更新。这种双向编辑方式能帮助初学者直观理解修饰符的作用，但也要注意，复杂布局仍需手动编写代码，可视化工具更适合快速调整和探索。
图片处理的常用修饰符组合
示例中为图片设置了固定尺寸、圆形裁剪、灰色描边和阴影。这些修饰符的顺序会影响最终效果：先frame确定大小，再clipShape裁剪，然后overlay添加描边，最后shadow添加阴影。若顺序颠倒，可能导致裁剪掉阴影或描边被裁剪。理解修饰符的链式调用顺序，是掌握SwiftUI视图修饰的关键。
Q&A
如何在SwiftUI中修正文本的颜色和布局？
可以通过按住control+command点击视图上的文字，选择修正Label和颜色来修改文本的颜色和布局。
什么是VStack，它在SwiftUI中有什么作用？
VStack是SwiftUI中的一种视图，用于实现纵向布局，类似于HTML中的div。
如何在SwiftUI中添加新的文本并修改其对齐方式？
可以将光标放在现有文字上，点击右上角的+号选择Text，然后通过修改器选择左对齐。
在SwiftUI中如何添加图片并设置圆角效果？
需要创建新的文件img.swift，添加Image标签，并使用.clipShape(Circle())来设置圆角效果。
如何使用SwiftUI创建一个包含图片和文本的视图？
可以使用VStack将图片和文本组合在一起，设置各自的样式和布局。
在SwiftUI中如何调整文本的字体和颜色？
可以通过修改器设置文本的字体和使用.foregroundColor()方法来调整颜色。
