防止 SwiftUI 导航栏自动调整/匹配背景到相邻元素

Question

我有一个航班详细信息视图（来自根导航视图的目的地），其顶部栏显示该航班周围相关时间的相对时间。该顶部栏是位于详细视图主体最顶部的第一个子视图。但是，当它这样做时，工具栏/导航栏背景会自动与此顶部栏的背景匹配，这可能是一个简洁的内置功能，但在本例中并非如此......

var body: some View {
    VStack {
        StatusView().padding(.top, 1) // <-- "Solves" it but don't want this gap
        FlightCardView()
        GateInfoView()
        // and so on
    }
    .navigationTitle(listItem.flightNo) // Not really necessary, overridden by .principal
    .toolbar {
        ToolbarItem(placement: .principal) {
            VStack {
                HStack(spacing: 0) {
                    Text("SK").fontWeight(.light)
                    Text(listItem.flightNo).fontWeight(.bold)
                }
                .font(.system(size:18))
                Text(formatDateString(date: rosterItem.date, to: "EEEE d"))
                    .font(.system(size: 12))
                    .foregroundColor(.secondary)
                }
        }
    }
    .toolbarBackground(.hidden, for: .navigationBar) // Or color variants not working
}

前两个屏幕截图显示了主体顶部的相关子视图，导致导航栏匹配颜色。如果我为此子视图指定顶部填充 1，则导航栏将获得其默认的半透明背景（最后一个屏幕截图），但如果子视图与其完全相邻，则不会。我显然不想要那个 1px 的间隙。

我已经尝试过

.toolbarBackground(.hidden, for: .navigationBar)

修饰符，但没有成功。根据类似的帖子，我还将以下

init()

应用于 父视图 （从该详细视图导航的位置），但没有运气。

init() {
        let standardAppearance = UINavigationBarAppearance()
        standardAppearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial) // I do NOT want the opaque background
        
        UINavigationBar.appearance().standardAppearance = standardAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = standardAppearance
    }

任何人都知道如何防止导航栏将其背景与相邻元素匹配？

Answer 1

当屏幕内容向上滚动到顶部区域后面时，您看到的效果是半透明的

Material

背景。

要显示纯色，当

.toolbarBackground(.hidden, for: .navigationBar)

更改为颜色或其他

ShapeStyle

例如

.background

时，它对我有用。

这是一个独立的示例来展示它的工作原理：

NavigationStack {
    ScrollView {
        Color.blue
            .frame(height: 250)
            .overlay(Text("StatusView"))
        Color.pink
            .frame(height: 400)
            .overlay(Text("FlightCardView"))
        Color.green
            .frame(height: 400)
            .overlay(Text("GateInfoView"))
        // and so on
    }
    .foregroundStyle(.white)
    .toolbar {
        ToolbarItem(placement: .principal) {
            VStack {
                HStack(spacing: 0) {
                    Text("SK").fontWeight(.light)
                    Text("123").fontWeight(.bold)
                }
                .font(.system(size:18))
                Text("Friday 12 April")
                    .font(.system(size: 12))
                    .foregroundColor(.secondary)
            }
        }
    }
    // comment out to see the default Material background
    .toolbarBackground(.background, for: .navigationBar)
}

如果您无法让它在您的代码上下文中工作，请尝试提供一个完整的工作示例，以允许重现问题。