需要实现一个可通过ViewModifier应用于任意SwiftUI视图的Tooltip组件，样式参考Airbnb的实现，组件宽度为屏幕宽度减去左右各20pt边距。

当前实现仅在视图完全居中于屏幕时正常工作，若视图不在屏幕中间，布局就会崩溃。

当前代码：

struct TestView: View {
    var body: some View {
        HStack {
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundStyle(Color.green)
                .tooltip()
        }
    }
}

extension View {
    func tooltip() -> some View {
        modifier(TooltipModifier())
    }
}

struct TooltipModifier: ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .overlay(alignment: .bottom) {
                Tooltip()
                    .fixedSize()
                    .alignmentGuide(.bottom, computeValue: { dimension in
                        dimension[.top] - 20
                    })
            }
    }
}

struct Tooltip: View {
    var body: some View {
        ZStack(alignment: .top) {
            HStack {
                Text("This is some text that guides the user")
                Spacer()
                Image(systemName: "xmark.circle.fill")
                    .resizable()
                    .frame(width: 16, height: 16)
            }
            .padding(8)
            // 仅当视图位于屏幕正中间时生效，否则布局错乱
            .frame(width: UIScreen.main.bounds.width - 40)
            .background(Color.red.opacity(0.5))
            .cornerRadius(8)
            
            Triangle()
                .fill(Color.red.opacity(0.5))
                .frame(width: 20, height: 10)
                .offset(y: -10)
        }
    }
}

struct Triangle: Shape {
    public func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let topMiddle = CGPoint(x: rect.midX, y: rect.minY)
        let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)
        let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)
        
        path.move(to: bottomLeft)
        path.addLine(to: bottomRight)
        
        path.addArc(
            center: CGPoint(x: topMiddle.x, y: topMiddle.y),
            radius: 0,
            startAngle: .degrees(0),
            endAngle: .degrees(180),
            clockwise: true
        )
        
        path.addLine(to: bottomLeft)
        
        return path
    }
}

当视图居中时（如TestView所示），结果符合预期；但如果在主HStack中添加第二个矩形，使视图不再居中，布局就会崩溃。尝试过GeometryReader，但完全破坏了布局，请问如何实现支持全屏宽度且适配屏幕任意位置视图的方案？

核心问题在于Tooltip的布局依赖父视图对齐规则，且直接使用UIScreen.main.bounds脱离了当前布局上下文。我们可以通过将Tooltip挂载到全局层级，并基于目标视图的全局坐标动态定位来解决问题。

修改要点 #

1. 获取目标视图全局坐标：用GeometryReader捕获目标视图在屏幕上的位置，为Tooltip定位提供依据。
2. 全局层级展示Tooltip：将Tooltip放在独立的Overlay中，不受目标视图所在布局容器的约束。
3. 动态调整箭头位置：根据目标视图的中心位置，偏移Tooltip的指向三角形，确保箭头始终精准指向目标视图底部。

完整实现代码 #

import SwiftUI

struct TestView: View {
    var body: some View {
        HStack(spacing: 20) {
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundStyle(Color.green)
                .tooltip(text: "This is some text that guides the user")
            
            Rectangle()
                .frame(width: 100, height: 50)
                .foregroundStyle(Color.blue)
                .tooltip(text: "Another tooltip for different view")
        }
        .padding()
    }
}

extension View {
    func tooltip(text: String) -> some View {
        modifier(TooltipModifier(text: text))
    }
}

struct TooltipModifier: ViewModifier {
    let text: String
    @State private var showTooltip = true
    @State private var targetGlobalFrame: CGRect = .zero
    
    func body(content: Content) -> some View {
        content
            // 捕获目标视图的全局坐标
            .background(
                GeometryReader { geo in
                    Color.clear
                        .onAppear {
                            targetGlobalFrame = geo.frame(in: .global)
                        }
                }
            )
            // 点击切换Tooltip显示状态
            .onTapGesture {
                showTooltip.toggle()
            }
            // 全局层级挂载Tooltip
            .overlay(
                Group {
                    if showTooltip {
                        TooltipView(text: text, targetFrame: targetGlobalFrame)
                            .position(
                                x: UIScreen.main.bounds.midX,
                                y: targetGlobalFrame.minY - 60
                            )
                    }
                }
            )
    }
}

struct TooltipView: View {
    let text: String
    let targetFrame: CGRect
    private let tooltipWidth = UIScreen.main.bounds.width - 40
    
    var body: some View {
        ZStack(alignment: .top) {
            // Tooltip主体
            HStack {
                Text(text)
                    .font(.system(size: 14))
                Spacer()
                Image(systemName: "xmark.circle.fill")
                    .resizable()
                    .frame(width: 16, height: 16)
                    .foregroundColor(.black)
            }
            .padding(12)
            .frame(width: tooltipWidth)
            .background(Color.white)
            .cornerRadius(8)
            .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
            
            // 指向箭头，根据目标视图位置动态偏移
            Triangle()
                .fill(Color.white)
                .frame(width: 20, height: 10)
                .offset(
                    x: targetFrame.midX - UIScreen.main.bounds.midX,
                    y: -10
                )
        }
    }
}

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

关键说明 #

• 全局坐标捕获：通过GeometryReader的.global坐标系，准确获取目标视图在屏幕上的位置，确保Tooltip定位不受父布局影响。
• 独立布局层级：Tooltip通过全局Overlay展示，宽度固定为屏幕宽度减40pt，完全符合Airbnb的样式要求。
• 动态箭头偏移：计算目标视图中心与屏幕中心的差值，调整箭头的水平偏移量，保证箭头始终指向目标视图底部中心。

内容的提问来源于stack exchange，提问作者stompy