AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 79577353
Accepted
Gargo
Gargo
Asked: 2025-04-16 22:02:09 +0800 CST2025-04-16 22:02:09 +0800 CST 2025-04-16 22:02:09 +0800 CST

SwiftUI 中的“背景模糊”?

  • 772

我想绘制一个带有模糊面板的图像,该面板带有文本。问题是面板框架依赖于文本框架。同时,mask修饰符的设置与文本和面板是分开的。

我的代码:

struct SomeView: View {
    @State var frame: CGRect = .zero
    
    var body: some View {
        ZStack {
            Image(.defaultCard)
            Image(.defaultCard)
                .blur(radius: 30)
                .mask {
                    Rectangle()
                        .frame(width: frame.width, height: frame.height)
                        .position(x: frame.midX, y: frame.midY)
                }
            ZStack(alignment: .bottomLeading) {
                Color.clear
                HStack {
                    Text("...")
                    Text("...")
                }
                .padding()
                .background {
                    GeometryReader { geometry in
                        Color.clear
                            .onAppear {
                                frame = geometry.frame(in: .global)
                            }
                            .onChange(of: geometry.size) { _ in
                                frame = geometry.frame(in: .global)
                            }
                    }
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

所有内容都已绘制,但遮罩位置不正确。以下代码返回了错误的帧:

frame = geometry.frame(in: .global)

如何解决这个问题?我知道我可以使用 UIKit 的模糊功能,但 SwiftUI 模糊功能更符合我的要求。

swiftui
  • 1 1 个回答
  • 28 Views

1 个回答

  • Voted
  1. Best Answer
    Benzy Neez
    2025-04-16T22:24:57+08:002025-04-16T22:24:57+08:00

    定位蒙版的一种方法是使用.matchedGeometryEffect。这样,您根本不需要测量面板的尺寸和位置。

    需要一个 ANamespace而不是状态变量,并且需要一个任意标识符来将掩码与面板匹配。以下更新的示例使用“Panel”作为标识符。

    struct SomeView: View {
        @Namespace private var ns
    
        var body: some View {
            ZStack(alignment: .bottomLeading) {
                Image(.defaultCard)
                    .resizable()
                    .scaledToFit()
                Image(.defaultCard)
                    .resizable()
                    .scaledToFit()
                    .blur(radius: 30)
                    .mask {
                        Rectangle()
                            .matchedGeometryEffect(id: "Panel", in: ns, isSource: false)
                    }
                VStack {
                    Text("The quick brown fox")
                    Text("jumps over the lazy dog")
                }
                .padding()
                .matchedGeometryEffect(id: "Panel", in: ns)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
    

    截屏

    • 2

相关问题

  • SwiftUI:如何创建颜色较浅的渐变?

  • SwiftUI - 带有“绑定”变量的通用视图

  • 创建日历日视图

  • 如何让 SwiftUI 的动画变慢

  • 不理解 SwiftUI 文本布局

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    重新格式化数字,在固定位置插入分隔符

    • 6 个回答
  • Marko Smith

    为什么 C++20 概念会导致循环约束错误,而老式的 SFINAE 不会?

    • 2 个回答
  • Marko Smith

    VScode 自动卸载扩展的问题(Material 主题)

    • 2 个回答
  • Marko Smith

    Vue 3:创建时出错“预期标识符但发现‘导入’”[重复]

    • 1 个回答
  • Marko Smith

    具有指定基础类型但没有枚举器的“枚举类”的用途是什么?

    • 1 个回答
  • Marko Smith

    如何修复未手动导入的模块的 MODULE_NOT_FOUND 错误?

    • 6 个回答
  • Marko Smith

    `(表达式,左值) = 右值` 在 C 或 C++ 中是有效的赋值吗?为什么有些编译器会接受/拒绝它?

    • 3 个回答
  • Marko Smith

    在 C++ 中,一个不执行任何操作的空程序需要 204KB 的堆,但在 C 中则不需要

    • 1 个回答
  • Marko Smith

    PowerBI 目前与 BigQuery 不兼容:Simba 驱动程序与 Windows 更新有关

    • 2 个回答
  • Marko Smith

    AdMob:MobileAds.initialize() - 对于某些设备,“java.lang.Integer 无法转换为 java.lang.String”

    • 1 个回答
  • Martin Hope
    Fantastic Mr Fox msvc std::vector 实现中仅不接受可复制类型 2025-04-23 06:40:49 +0800 CST
  • Martin Hope
    Howard Hinnant 使用 chrono 查找下一个工作日 2025-04-21 08:30:25 +0800 CST
  • Martin Hope
    Fedor 构造函数的成员初始化程序可以包含另一个成员的初始化吗? 2025-04-15 01:01:44 +0800 CST
  • Martin Hope
    Petr Filipský 为什么 C++20 概念会导致循环约束错误,而老式的 SFINAE 不会? 2025-03-23 21:39:40 +0800 CST
  • Martin Hope
    Catskul C++20 是否进行了更改,允许从已知绑定数组“type(&)[N]”转换为未知绑定数组“type(&)[]”? 2025-03-04 06:57:53 +0800 CST
  • Martin Hope
    Stefan Pochmann 为什么 {2,3,10} 和 {x,3,10} (x=2) 的顺序不同? 2025-01-13 23:24:07 +0800 CST
  • Martin Hope
    Chad Feller 在 5.2 版中,bash 条件语句中的 [[ .. ]] 中的分号现在是可选的吗? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench 为什么双破折号 (--) 会导致此 MariaDB 子句评估为 true? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng 为什么 `dict(id=1, **{'id': 2})` 有时会引发 `KeyError: 'id'` 而不是 TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob:MobileAds.initialize() - 对于某些设备,“java.lang.Integer 无法转换为 java.lang.String” 2024-03-20 03:12:31 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve