SwiftUI布局之父子关系分析

先上代码，分析一下这段代码中存在的视图层级父子关系

Text("Hello SwiftUI")
    .background(
        GeometryReader { geo in
            Color.clear
                .preference(key: SizePreferenceKey.self, value: geo.size)
        }
    )

这段代码表面很短，但其中其实包含了 四层父子关系 ——是 SwiftUI 的布局系统、ViewBuilder 语义和 GeometryReader 行为综合起来的结果。

我们一层层来拆。

---

🧩 先看完整代码结构

这段代码中，SwiftUI 的实际视图层级大致是这样：

RootView
 └── background modifier
      ├── Front (原始内容): Text("Hello SwiftUI")
      └── Background: GeometryReader { ... }
           └── Color.clear

---

🧱 一层层分析父子关系

1️⃣ 最外层：Text("Hello SwiftUI")

Text 是基础内容视图，它在 SwiftUI 的布局系统中是一个“叶节点”。

然后我们对它应用 .background(...) 修饰符。

---

2️⃣.background(...)修饰符

.background 实际上会返回一个新的视图，其内部是一个 ZStack 结构：

ZStack {
    backgroundView  // 在下层
    originalView    // 在上层
}

也就是说：

• Text("Hello SwiftUI") 是上层内容；

• GeometryReader { ... } 是下层背景；

• .background(...) 返回的这个合成视图成为新的“父视图”。

👉 所以在这里：

父视图	子视图
.background 产生的新组合视图	Text 和 GeometryReader

---

3️⃣GeometryReader的内部关系

GeometryReader 自身又是一个容器视图。

它接收一个闭包 (GeometryProxy) -> some View，

这个闭包返回的视图会成为 GeometryReader 的唯一子视图。

在你的代码中：

GeometryReader { geo in
    Color.clear
        .preference(key: SizePreferenceKey.self, value: geo.size)
}

也就是说：

父视图	子视图
GeometryReader	Color.clear

---

4️⃣

Color.clear的附加修饰.preference(...)

.preference(...) 是一个 View Modifier。

它不会生成额外的视觉层级，而是包装一层逻辑层（在 SwiftUI 渲染树中是一个中间节点）。

所以从视觉层级上看：

GeometryReader
 └── Color.clear
       └── (PreferenceModifier)

逻辑层级上，这个 modifier 会将 “geo.size” 信息绑定到一个 PreferenceKey 上，

然后在视图树上传递给父视图。

---

📊 总结层级结构图

把所有关系整合起来：

(background 修饰符生成的父容器)
└── Text("Hello SwiftUI")                     // 上层内容
└── GeometryReader                            // 下层背景
     └── Color.clear
          └── .preference(key:value:)         // 上传 geo.size

---

🧠 一句话总结父子关系逻辑

层级	父视图	子视图	说明
1	background 修饰符生成的新视图	Text、GeometryReader	background 是个 ZStack 结构
2	GeometryReader	Color.clear	这是 GeometryReader 的内容闭包
3	Color.clear	PreferenceModifier	修饰符不是视觉层，但附加到 Color 上
4	PreferenceModifier	GeometryReader 的父层（上传数据）	数据向上流动，直到被 onPreferenceChange 接收