如果我將內容添加到視圖底部，對 SwiftUI 的模糊效果 NavigationBar 將停止工作

Question

我有一個非常簡單的帶有 NavigationBar 的視圖和一個 VStack 中的列表。 如果我在列表上向上滾動，默認情況下，列表內容將顯示在 NavigationBar 后面，並具有很好的模糊效果。 這種行為是正確的。

正確的模糊效果

我還希望在我的列表下方有一些不滾動的固定文本。 但是，如果我在列表下方添加以下單行代碼Text("bottom") ，NavigationBar 上的模糊效果將不再起作用。

模糊效果消失了

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 之上，要么繼承了該邏輯。

使用 label，列表不是 UI 樹中的第一個元素，出於某種原因 SwiftUI 將 label 放在列表之前，即使在代碼中是相反的方式，這會導致導航欄邏輯中斷。

如果我們捕獲應用程序的 UI 層次結構，那么如果“底部”label 是應用程序的一部分，我們就會看到：

，但是，如果我們對 label 進行注釋，我們會得到：

上圖證實了 iOS 在檢測到滾動視圖是主視圖時給予不同處理的理論。