设置VStack背景色后Toolbar莫名变灰的原因排查

我已复现该问题（可直接在Xcode中运行以下代码）：

var body: some View {
    VStack {
        Text("hi")
        Spacer()
    }
    .frame(maxWidth: .infinity)
    .background(Color.gray)
    .border(.red)
    .toolbar {
        // items
    }
}

运行后发现Toolbar也变成了灰色，红色边框清晰显示VStack并未延伸至Toolbar后方，请问这是什么原因？

问题截图：

原因 #

这是SwiftUI导航容器（如NavigationStack）的默认行为：当给视图添加.toolbar修饰符时，视图所在的导航容器会自动继承子视图的背景设置。虽然VStack有红色边框限制了自身范围，但.background修饰符的作用范围会渗透到导航容器的Toolbar区域。

解决办法 #

方法1：明确指定导航栏背景 #

添加.navigationBarBackground修饰符，手动设置Toolbar所在导航栏的背景颜色，避免继承子视图的背景：

var body: some View {
    VStack {
        Text("hi")
        Spacer()
    }
    .frame(maxWidth: .infinity)
    .background(Color.gray)
    .border(.red)
    .toolbar {
        // items
    }
    .navigationBarBackground(.white) // 设置为你需要的背景色
}

方法2：隔离背景作用范围 #

用ZStack包裹VStack，让.background仅作用于内部视图，不会渗透到导航容器：

var body: some View {
    ZStack {
        VStack {
            Text("hi")
            Spacer()
        }
        .frame(maxWidth: .infinity)
        .background(Color.gray)
        .border(.red)
    }
    .toolbar {
        // items
    }
}

内容的提问来源于stack exchange，提问作者erotsppa