SwiftUI布局之AnchorPreferences

SwiftUI 中的 AnchorPreferences：连接父子视图的几何桥梁

在 SwiftUI 中，数据流通常是单向的 ------ 父视图向下传递数据。但有时我们希望子视图能告诉父视图一些信息，比如自己的尺寸、位置、坐标区域。这时，AnchorPreferences 就是我们的「秘密武器」。

---

🌱 什么是 AnchorPreferences？

AnchorPreferences 是 SwiftUI 的一个 View 修饰符，可以让你从子视图中提取出与布局相关的几何信息（如位置、尺寸、Bounds 等），并通过 PreferenceKey 向上传递给父视图。

一句话总结它的用途：

让父视图获取子视图在全局布局中的几何信息。

---

🧩 基础用法示例

我们先从一个简单的例子开始。

假设我们想知道某个子视图（一个按钮）在父视图中的位置。

struct AnchorPreferenceExample: View {
    @State private var buttonFrame: CGRect = .zero

    var body: some View {
        VStack {
            Text("按钮位置：\(Int(buttonFrame.origin.x)), \(Int(buttonFrame.origin.y))")
                .padding()

            Button("点我") {}
                .anchorPreference(key: BoundsPreferenceKey.self, value: .bounds) { anchor in
                    anchor
                }
        }
        .backgroundPreferenceValue(BoundsPreferenceKey.self) { anchor in
            GeometryReader { geo in
                if let anchor {
                    let rect = geo[anchor]
                    Color.clear
                        .onAppear { buttonFrame = rect }
                        .onChange(of: rect) { buttonFrame = $0 }
                }
            }
        }
    }
}

struct BoundsPreferenceKey: PreferenceKey {
    static var defaultValue: Anchor<CGRect>? = nil
    static func reduce(value: inout Anchor<CGRect>?, nextValue: () -> Anchor<CGRect>?) {
        value = nextValue() ?? value
    }
}

📖 解析一下

1. .anchorPreference(key:value:transform:)

   • 从当前视图提取一个「锚点」信息，比如 .bounds。
   • 存储在一个 PreferenceKey 中。

2. .backgroundPreferenceValue(_:)

   • 父视图读取子视图上传的锚点信息。
   • 通过 GeometryProxy[anchor] 获取实际的坐标与尺寸。

3. PreferenceKey

   • 负责定义数据类型与合并策略（多个子视图时如何处理）。

---

⚡ 实战案例：弹窗跟随按钮位置

来看一个常见需求：

点击按钮后弹出一个菜单，而菜单要自动出现在按钮正下方。

struct FloatingMenuExample: View {
    @State private var showMenu = false
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color(UIColor.systemBackground)
                .ignoresSafeArea()

            Button("显示菜单") {
                withAnimation { showMenu.toggle() }
            }
            .anchorPreference(key: MenuAnchorKey.self, value: .bounds) { $0 }
        }
        .overlayPreferenceValue(MenuAnchorKey.self) { anchor in
            GeometryReader { geo in
                if let anchor, showMenu {
                    let rect = geo[anchor]
                    VStack(spacing: 0) {
                        Text("🍎 Apple")
                        Text("🍊 Orange")
                        Text("🍌 Banana")
                    }
                    .padding()
                    .background(RoundedRectangle(cornerRadius: 12).fill(.ultraThinMaterial))
                    .overlay(
                        RoundedRectangle(cornerRadius: 12)
                            .stroke(Color.black.opacity(0.1))
                    )
                    .shadow(radius: 5)
                    .position(x: rect.midX, y: rect.maxY + 40)
                    .transition(.opacity.combined(with: .move(edge: .top)))
                }
            }
        }
    }
}

struct MenuAnchorKey: PreferenceKey {
    static var defaultValue: Anchor<CGRect>? = nil
    static func reduce(value: inout Anchor<CGRect>?, nextValue: () -> Anchor<CGRect>?) {
        value = nextValue() ?? value
    }
}

✨ 运行效果：

• 点击「显示菜单」，一个浮动弹窗出现在按钮正下方；
• 无论按钮在什么位置，菜单都自动对齐；
• 不需要 GeometryReader 嵌套在子视图内 ------ 一切由 AnchorPreferences 完成。

---

⚙️ 工作原理解析

AnchorPreferences 的核心思想是 "布局信息在 SwiftUI 的 View Tree 上传播" ：

子视图通过 anchorPreference -> PreferenceKey
         ↓
父视图通过 backgroundPreferenceValue / overlayPreferenceValue 读取
         ↓
利用 GeometryProxy[anchor] 将相对锚点转换为具体坐标

可以理解为 SwiftUI 的「几何信息管道」：

角色	作用
.anchorPreference()	子视图上传几何锚点
PreferenceKey	存储锚点信息
.overlayPreferenceValue()	父视图读取锚点信息
GeometryReader	将 Anchor 转为实际位置

---

🧱 常用 Anchor 类型

类型	描述
.bounds	当前视图的边界矩形
.topLeading / .bottomTrailing 等	具体角位置
.center	中心点
.rect(in:)	自定义矩形区域（从 GeometryProxy 获取）

例如：

.anchorPreference(key: MyKey.self, value: .topLeading) { $0 }

---

🚀 应用场景举例

场景	描述
💬 Tooltip 定位	获取目标控件位置，显示气泡提示
🎯 弹窗/菜单	动态跟随点击位置
🧭 路径动画	两个 View 之间画线连接（如流程图）
📦 自适应布局	根据子项布局动态调整父容器的对齐方式
🔍 高亮引导	新手引导框高亮控件（可定位按钮位置）

---

🧠 进阶：多个 Anchor 合并

多个子视图都可以通过相同的 PreferenceKey 上传 Anchor，

父视图会在 reduce() 方法中收到多个值，可用于批量布局。

例如：

struct MultiAnchorKey: PreferenceKey {
    static var defaultValue: [Anchor<CGRect>] = []
    static func reduce(value: inout [Anchor<CGRect>], nextValue: () -> [Anchor<CGRect>]) {
        value.append(contentsOf: nextValue())
    }
}

这样就能在父视图中获取所有子项的位置，用于绘制连线或分布动画。

---

🎯 小结

特性	说明
📡 数据方向	子 → 父
💡 功能	传递几何信息（位置、尺寸）
🧩 关键组件	.anchorPreference()、PreferenceKey、.overlayPreferenceValue()
🧱 典型应用	Tooltip、菜单、引导、高亮框、连线图
AnchorPreferences 是 SwiftUI 布局系统中一块隐藏的宝石。

掌握它，就能实现很多 UIKit 中要手动计算坐标的复杂布局，而无需任何 Frame 操作。

---

🪶 结语

SwiftUI 的核心思想是"声明式布局"，但 AnchorPreferences 给了我们"命令式的洞口"------可以在纯声明式框架里实现自定义的几何逻辑。
一旦掌握它，你可以做出很多令人惊叹的交互，比如微信小程序弹窗、指向动画、可跟踪的标签定位等等。

---