SwiftUI 中布局的工作原理,你知道么?

本文详细探讨SwiftUI布局的工作原理,包括布局的三个关键步骤:父视图询问子视图大小、子视图选择自身尺寸、父视图定位子视图。通过示例解释了如何创建自定义对齐、使用GeometryReader等,揭示了SwiftUI布局的灵活性。同时,介绍了布局中立的概念以及修饰符顺序的重要性,帮助开发者更好地理解和应用SwiftUI布局。
摘要由CSDN通过智能技术生成
  1. SwiftUI 布局简介
    在这个技术项目中,我们将探讨 SwiftUI 如何处理布局。有些事情已经解释过了,有些可能是你自己弄明白的,但更多的是你在这一点上想当然的事情,所以我希望一个详细的探索能真正为 SwiftUI 的工作方式提供一些启示。
    在此过程中,您还将学习如何创建更高级的布局对齐,使用GeometryReader构建特殊效果,以及更多——我知道您会热衷于在自己的应用程序中部署的一些真正强大的功能。
    继续使用单视图应用程序模板创建一个新的 iOS 项目,并将其命名为 layoutDageMetricy。您需要在资源目录中提供一个图像,以便遵循有关自定义对齐指南的章节,但它可以是任何您想要的——它实际上只是一个占位符。
  2. SwiftUI 中布局的工作原理
    所有的 SwiftUI 布局都有三个简单的步骤,理解这些步骤是每次获得优秀布局的关键。步骤如下:

父视图提供一个大小并询问其子视图的大小。

子视图根据自己的信息,它会选择自己的尺寸,而父视图必须尊重这个选择。

然后父视图在其坐标空间中定位子视图。

在幕后,SwiftUI 执行第四步:尽管它将位置和大小存储为浮点数,但在渲染时,SwiftUI 会将所有像素舍入到最接近的值,这样我们的图形仍然清晰。
这三条规则看起来很简单,但它们允许我们创建非常复杂的布局,每个视图都可以决定如何以及何时调整大小,而无需父级参与。
为了演示这些规则的实际操作,我希望您修改默认的 SwiftUI 模板以添加background()修饰符,如下所示:

struct ContentView: View {    var body: some View {        Text(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值