我在 SwiftUI 中为导航标题获取模糊背景的两次尝试均无效

Question

初学者在这里制作了一个简单的待办事项列表，但试图仅为导航标题获得模糊背景。我正在尝试使用和不使用 UIViewRepresentable 结构来执行此操作。这是我没有 UIViewRepresentable 结构的方法。

"""

构造 ContentView：视图 {

init() {
    let appearance = UINavigationBarAppearance()

    appearance.backgroundEffect = UIBlurEffect(style: .regular)

    UINavigationBar.appearance().standardAppearance = appearance        
    UITableView.appearance().backgroundColor = .clear
}

var body: some View {
    
        VStack {
            GeometryReader { geometry in
            VStack {
                List {
                    ListEntry()
                }
                .opacity(0.8)
                .frame(height: geometry.size.height*(4/5))
            }
            VStack {
                // empty for now
            }
            }
        }
        .background(LeavesBackgroundView())
        .navigationTitle(Text("Monday, Apr 26"))
        .navigationBarItems(trailing: Image(systemName: "gear"))
}

}

"""

..现在有了 UIViewRepresentable 结构：

"""

构造 theBlurView: UIViewRepresentable {

@State var style: UIBlurEffect.Style = .systemMaterial

func makeUIView(context: Context) -> UIVisualEffectView {
    let view = UIVisualEffectView(effect: UIBlurEffect(style: style))
    return view
}

func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
    uiView.effect = UIBlurEffect(style: style)
}

}

构造 ContentView：视图 {

init() {
    let appearance = UINavigationBarAppearance()

    appearance.backgroundEffect = theBlurView(style: .regular) // error right here

    UINavigationBar.appearance().standardAppearance = appearance       
    UITableView.appearance().backgroundColor = .clear
}

var body: some View {
    
        VStack {
            GeometryReader { geometry in
            VStack {
                List {
                    ListEntry()
                }
                .opacity(0.8)
                .frame(height: geometry.size.height*(4/5))
            }
            VStack {
                // empty for now
            }
            }
        }
        .background(LeavesBackgroundView())
        .navigationTitle(Text("Monday, Apr 26"))
        .navigationBarItems(trailing: Image(systemName: "gear"))
}

}

"""

在第二种情况下，我收到错误“无法将类型 'theBlurView' 的值分配给类型 'UIBlurEffect?'”，但我无法找到使它们成为同一类型的方法。在第一种情况下，我没有收到任何错误，但我得到了一个白色不透明的导航标题背景。

在这两种情况下，我都明白了 this

其中导航标题背景为白色。我也尝试了不同的 material 样式（.dark、.light、.systemChromeMaterial 等），但没有什么能让它变得模糊。

This is the kind of blur I'm trying to get

有人能给我指出正确的方向吗？

Answer 1

如果您接受第三方库：

安装SwiftUIX
通过修改您的 NavBar .background(VisualEffectBlurView(blurStyle: .systemThinMaterial)) 用几行代码使模糊变得模糊，并且在使用之前不要忘记导入 SwiftUIX。

我在 SwiftUI 中为导航标题获取模糊背景的两次尝试均无效

My two attempts at getting a blurred background for a navigation title in SwiftUI are not working

uinavigationbar

uikit

swift

swiftui

swiftui-navigationview