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

  1. SwiftUI 布局简介
    在这个技术项目中,我们将探讨 SwiftUI 如何处理布局。有些事情已经解释过了,有些可能是你自己弄明白的,但更多的是你在这一点上想当然的事情,所以我希望一个详细的探索能真正为 SwiftUI 的工作方式提供一些启示。
    在此过程中,您还将学习如何创建更高级的布局对齐,使用GeometryReader构建特殊效果,以及更多——我知道您会热衷于在自己的应用程序中部署的一些真正强大的功能。
    继续使用单视图应用程序模板创建一个新的 iOS 项目,并将其命名为 layoutDageMetricy。您需要在资源目录中提供一个图像,以便遵循有关自定义对齐指南的章节,但它可以是任何您想要的——它实际上只是一个占位符。
  2. SwiftUI 中布局的工作原理
    所有的 SwiftUI 布局都有三个简单的步骤,理解这些步骤是每次获得优秀布局的关键。步骤如下:

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

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

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

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

struct ContentView: View {    var body: some View {        Text(
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SwiftUI提供了多种方法来实现自定义布局。其,可以使用HStack、VStack、ZStack等布局容器来组合和排列视图元素,实现各种复杂界面。 另外,SwiftUI还提供了对齐指南来帮助文本对齐,如.leading、.trailing、.top等。但是当处理在不同视图之间分割的视图时,如果需要使完全不同的两个视图部分对齐,可以使用自定义的对齐辅助线。使用这些辅助线可以在整个界面创建和使用辅助线,在视图之前或之后发生的变化并不重要,它们仍然会按照一条线排列。 例如,可以使用offset(x: CGFloat, y: CGFloat)方法为视图指定水平和垂直的偏移距离。这个方法可以将视图在水平和垂直方向上移动指定的距离。 综上所述,使用SwiftUI可以通过布局容器和对齐指南实现自定义布局,同时也可以使用偏移方法来调整视图的位置。这些功能可以帮助您创建个性化的布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [SwiftUI 布局之自定义手动布局设置各种相对位置(教程含源码)](https://blog.csdn.net/iCloudEnd/article/details/107718464)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [SwiftUI之深入解析布局如何自定义AlignmentGuides](https://blog.csdn.net/Forever_wj/article/details/121958698)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值