- SwiftUI 布局简介
在这个技术项目中,我们将探讨 SwiftUI 如何处理布局。有些事情已经解释过了,有些可能是你自己弄明白的,但更多的是你在这一点上想当然的事情,所以我希望一个详细的探索能真正为 SwiftUI 的工作方式提供一些启示。
在此过程中,您还将学习如何创建更高级的布局对齐,使用GeometryReader构建特殊效果,以及更多——我知道您会热衷于在自己的应用程序中部署的一些真正强大的功能。
继续使用单视图应用程序模板创建一个新的 iOS 项目,并将其命名为 layoutDageMetricy。您需要在资源目录中提供一个图像,以便遵循有关自定义对齐指南的章节,但它可以是任何您想要的——它实际上只是一个占位符。 - SwiftUI 中布局的工作原理
所有的 SwiftUI 布局都有三个简单的步骤,理解这些步骤是每次获得优秀布局的关键。步骤如下:
父视图提供一个大小并询问其子视图的大小。
子视图根据自己的信息,它会选择自己的尺寸,而父视图必须尊重这个选择。
然后父视图在其坐标空间中定位子视图。
在幕后,SwiftUI 执行第四步:尽管它将位置和大小存储为浮点数,但在渲染时,SwiftUI 会将所有像素舍入到最接近的值,这样我们的图形仍然清晰。
这三条规则看起来很简单,但它们允许我们创建非常复杂的布局,每个视图都可以决定如何以及何时调整大小,而无需父级参与。
为了演示这些规则的实际操作,我希望您修改默认的 SwiftUI 模板以添加background()修饰符,如下所示:
struct ContentView: View { var body: some View { Text(