SwiftUI中NavigationView背景色无法全屏？Xcode14下如何解决

这确实是Xcode14（对应iOS16）用户常见的问题，根源是SwiftUI在该版本中对NavigationView（兼容新的NavigationStack）和List的默认背景渲染逻辑做了调整，系统默认背景层会遮挡自定义背景，导致颜色无法铺满整个视图。以下是具体解决方案：

关键修改步骤 #

1. 给NavigationView设置全局背景 #

将背景色直接应用到NavigationView层级，同时忽略安全区，确保覆盖导航栏下方的所有区域：

NavigationView {
    // ... 内部视图
}
.background(Color.red.ignoresSafeArea(.all)) // 移到NavigationView层级
.navigationViewStyle(StackNavigationViewStyle())

2. 彻底透明化List相关背景 #

除了设置UITableView的背景色，还要显式设置List本身和列表行的背景为透明，避免默认行背景遮挡全局背景：

List {
    ForEach(vm.savedEntities) { entity in
        Text(entity.name ?? "NO NAME")
            .onTapGesture {
                vm.updateFruit(entity: entity)
            }
            .listRowBackground(Color.clear) // 行背景透明
    }
    .onDelete(perform: vm.deleteFruit)
}
.background(Color.clear) // List本身背景透明
.onAppear() {
    UITableView.appearance().backgroundColor = UIColor.clear
    UITableViewCell.appearance().backgroundColor = UIColor.clear // 确保单元格背景透明
}

3. 统一导航栏背景色 #

在iOS16+中，使用.toolbarBackground系列修饰符覆盖导航栏的默认背景，使其与全局背景一致：

VStack {
    // ... 内部视图
}
.navigationTitle("Fruits")
.toolbarBackground(Color.red, for: .navigationBar) // 设置导航栏背景色
.toolbarBackground(.visible, for: .navigationBar) // 强制显示自定义背景

修改后的完整代码 #

var body: some View {
    NavigationView {
        VStack(spacing: 20) {
            TextField("Add text here...", text: $textFieldText)
                .font(.headline)
                .padding(.leading)
                .frame(height: 55)
                .background(back)
                .cornerRadius(10)
                .padding(.horizontal)
            
            Button(action: {
                guard !textFieldText.isEmpty else { return }
                vm.addFruit(text: textFieldText)
                textFieldText = ""
            }, label: {
                Text("Save")
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .frame(height: 55)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.horizontal)
            })
            
            List {
                ForEach(vm.savedEntities) { entity in
                    Text(entity.name ?? "NO NAME")
                        .onTapGesture {
                            vm.updateFruit(entity: entity)
                        }
                        .listRowBackground(Color.clear)
                }
                .onDelete(perform: vm.deleteFruit)
            }
            .background(Color.clear)
            .onAppear() {
                UITableView.appearance().backgroundColor = UIColor.clear
                UITableViewCell.appearance().backgroundColor = UIColor.clear
            }
        }
        .navigationTitle("Fruits")
        .toolbarBackground(Color.red, for: .navigationBar)
        .toolbarBackground(.visible, for: .navigationBar)
    }
    .background(Color.red.ignoresSafeArea(.all))
    .navigationViewStyle(StackNavigationViewStyle())
}

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