如果我将内容添加到视图底部，SwiftUI 导航栏上的模糊效果将停止工作

Question

我有一个非常简单的视图，带有导航栏和 VStack 中的列表。如果我在列表上向上滚动，列表内容将显示在导航栏后面，默认情况下具有漂亮的模糊效果。这种行为是正确的。

正确的模糊效果

我还希望在列表下方有一些不滚动的固定文本。但是，如果我在列表下方添加以下单行代码Text("bottom")，导航栏上的模糊效果将不再起作用。

模糊效果消失了

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                List {
                    Text("Hello, world!")
                        .foregroundColor(.red)
                        .font(.system(size: 70))
                }
                .listStyle(.plain)
                .border(.red)

                Text("bottom")  // remove this and the blur works
            }
            .background(.black)
            .navigationBarTitle("test", displayMode: .inline)
        }
    }
}

为什么会发生这种情况？如何在保留模糊效果的同时获取列表下方的内容？

Answer 1

这主要是基于本文揭示的一些有趣事实的有根据的猜测。基本上，UIKit 有一些内部逻辑，当它检测到层次结构中的第一个视图是 时UIScrollView，它会根据该逻辑调整导航栏的行为。SwiftUI 要么仍然构建在 UIKit 之上，要么继承了该逻辑。

有了标签，列表就不是 UI 树中的第一个元素，出于某种原因，SwiftUI 将标签放在列表之前，即使在代码中是相反的，这会导致导航栏逻辑中断。

如果我们捕获应用程序的 UI 层次结构，如果“底部”标签是应用程序的一部分，我们就会看到以下内容：

但是，如果我们用标签注释掉行，我们会得到：

上面的图片证实了 iOS 在检测到滚动视图为主视图时会给予不同处理的理论。