SwiftUI如何将列表所在视图背景设为黑色且正常显示列表

问题根源 #

原代码的核心问题：

• List默认自带白色背景及单元格背景，直接给NavigationView设置黑色背景会被List遮挡
• 使用edgesIgnoringSafeArea(.all)时，未处理List的背景层级，导致列表内容被覆盖

调整后的完整代码 #

以下代码实现全黑背景的同时，保证列表内容正常显示：

struct SavedPasswordsView: View {
    @Binding var savedPasswords: [String]
    
    // 初始化时配置导航栏外观（适配iOS 15及以下）
    init(savedPasswords: Binding<[String]>) {
        self._savedPasswords = savedPasswords
        UINavigationBar.appearance().backgroundColor = .black
        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.orange]
    }

    var body: some View {
        NavigationView {
            List {
                ForEach(savedPasswords, id: \.self) { password in
                    Text(password)
                        .foregroundColor(.orange)
                        .listRowBackground(Color.black) // 替换单元格默认白色背景
                }
                .onDelete(perform: deletePassword)
            }
            .listStyle(PlainListStyle()) // 移除List默认的分组背景样式
            .background(Color.black) // 设置List本身的背景为黑色
            .navigationBarTitle("Saved Passwords")
            .navigationBarTitleDisplayMode(.inline)
            .toolbarBackground(Color.black, for: .navigationBar) // iOS16+导航栏背景设置
            .toolbarColorScheme(.dark, for: .navigationBar) // 适配导航栏元素深色模式
        }
        .navigationViewStyle(StackNavigationViewStyle())
        .background(Color.black.edgesIgnoringSafeArea(.all)) // 全局黑色背景，覆盖安全区
        .foregroundColor(.orange)
    }
    
    // 补充删除逻辑（原代码未实现）
    func deletePassword(at offsets: IndexSet) {
        savedPasswords.remove(atOffsets: offsets)
    }
}

关键修改说明 #

• 全局背景覆盖：在NavigationView外层添加Color.black.edgesIgnoringSafeArea(.all)，确保整个屏幕（包括安全区）都显示黑色
• List层级背景处理：
  给每个列表项设置.listRowBackground(Color.black)，替换默认白色单元格
  将List样式改为PlainListStyle()并设置.background(Color.black)，消除List自带的白色背景
• 导航栏适配：
  初始化时配置UINavigationBar外观，兼容低版本iOS
  使用toolbarBackground和toolbarColorScheme适配iOS16+的导航栏背景与深色模式

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