SwiftUI实现带文本模糊面板时蒙版位置错误的解决方法

需求背景 #

需要实现：图片上叠加带文本的模糊面板，面板尺寸由文本内容自动决定，模糊效果的蒙版与文本、面板分开设置，仅使用SwiftUI原生blur实现。

原代码问题 #

原代码通过GeometryReader在全局坐标系（.global）获取文本面板的frame来定位模糊蒙版，但由于坐标系转换的误差，导致模糊区域和文本面板位置错位。

解决方案1：复用布局结构对齐蒙版 #

直接让模糊层的蒙版复用文本的布局结构，利用SwiftUI的布局系统自动对齐，无需手动传递frame：

struct SomeView: View {
    var body: some View {
        ZStack {
            // 底层原图
            Image(.defaultCard)
            
            // 模糊层与文本层共享布局上下文
            ZStack(alignment: .bottomLeading) {
                // 模糊图片，蒙版直接使用文本的布局
                Image(.defaultCard)
                    .blur(radius: 30)
                    .mask(alignment: .bottomLeading) {
                        HStack {
                            Text("示例文本1")
                            Text("示例文本2")
                        }
                        .padding()
                    }
                
                // 实际显示的文本
                HStack {
                    Text("示例文本1")
                    Text("示例文本2")
                }
                .padding()
                .background(Color.black.opacity(0.1)) // 可选：增强文本可读性
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

解决方案2：用background实现更简洁的绑定 #

将模糊图片作为文本的背景，完全依赖SwiftUI布局系统自动匹配尺寸和位置，代码更简洁：

struct SomeView: View {
    var body: some View {
        Image(.defaultCard)
            .overlay(alignment: .bottomLeading) {
                HStack {
                    Text("示例文本1")
                    Text("示例文本2")
                }
                .padding()
                .background {
                    // 模糊背景自动匹配文本面板的尺寸和位置
                    Image(.defaultCard)
                        .blur(radius: 30)
                        .clipShape(RoundedRectangle(cornerRadius: 8)) // 可选：添加圆角
                }
                .foregroundColor(.white) // 可选：设置文本颜色
            }
    }
}

核心思路 #

• 避免手动在不同坐标系间转换frame，利用SwiftUI的布局系统自动对齐元素
• 让模糊层与文本层共享同一布局上下文，从根源上消除位置误差
• 两种方案都完全使用SwiftUI原生API，无需依赖UIKit组件

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