深色模式下List背景色呈黑色，如何修改ListView及导航栏统一背景色？

核心问题分析 #

当前代码里，深色模式下List默认会显示系统黑色背景，即便外层加了自定义背景色也会被覆盖；另外导航栏的颜色参数虽然传了，但可以通过统一变量来确保和List背景完全一致。

具体修改步骤 #

1. 抽离统一背景色变量 #

把重复的颜色判断逻辑抽成变量，既减少冗余代码，也方便后续统一调整：

let backgroundColor = colorScheme == .dark ? Color.SAColor.whiteWithAlpha10 : Theme.BackgroundColor.whiteBackgroundL2

2. 移除List的默认背景 #

SwiftUI的List在plain样式下自带系统背景，必须隐藏它才能让外层自定义背景显示出来，分两种兼容方案：

iOS 16+ 直接用官方API

给List添加scrollContentBackground(.hidden)修饰符：

List {
    // 你的Section内容
}
.listStyle(.plain)
.scrollContentBackground(.hidden) // 关键：隐藏默认滚动背景

兼容iOS 15及以下版本

在视图初始化时修改UITableView的全局外观：

init() {
    UITableView.appearance().backgroundColor = .clear
}

这样List的背景会变成透明，外层的自定义背景色就能透出来。

3. 统一导航栏颜色参数 #

用上面定义的backgroundColor变量替换导航栏的颜色参数，确保和List背景完全一致：

SaudiaNavigationView(viewModel: SaudiaNavigationViewModel(
    isHeaderPinned: false,
    title: "", 
    shouldShowProfileDetails: false,
    showTitleAlways: false,
    showBackButton: false, 
    normalLightColor: backgroundColor, 
    normalDarkColor: backgroundColor, // 统一用同一个变量
    rightButtonType: .ImageButton(image: SAImageAssetConstants.flightDetailsCloseIcon, accessibilityText: "",
                                  buttonAction: {
        presentationMode.wrappedValue.dismiss()
    }),
    imageButtonAccessibilityLabel: Accessibility.close))

4. 简化外层布局 #

去掉重复的背景设置和ignoresSafeArea调用，让结构更简洁：

GeometryReader { geometry in
    ZStack {
        backgroundColor // 全局统一背景
        VStack(alignment: .leading) {
            SaudiaNavigationView(...)
                .frame(height: 34 + geometry.safeAreaInsets.top)
            
            List {
                // Section内容
            }
            .listStyle(.plain)
            .scrollContentBackground(.hidden) // iOS16+
            .padding(.horizontal, -15)
            .padding(.vertical, -15)
        }
    }
    .ignoresSafeArea()
}

完整修改后的代码示例 #

struct YourView: View {
    @Environment(\.colorScheme) var colorScheme
    @Environment(\.presentationMode) var presentationMode
    
    init() {
        // 兼容iOS15及以下：设置UITableView背景透明
        UITableView.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        let backgroundColor = colorScheme == .dark ? Color.SAColor.whiteWithAlpha10 : Theme.BackgroundColor.whiteBackgroundL2
        
        GeometryReader { geometry in
            ZStack {
                backgroundColor
                VStack(alignment: .leading) {
                    SaudiaNavigationView(viewModel: SaudiaNavigationViewModel(
                        isHeaderPinned: false,
                        title: "", 
                        shouldShowProfileDetails: false,
                        showTitleAlways: false,
                        showBackButton: false, 
                        normalLightColor: backgroundColor, 
                        normalDarkColor: backgroundColor,
                        rightButtonType: .ImageButton(image: SAImageAssetConstants.flightDetailsCloseIcon, accessibilityText: "",
                                                      buttonAction: {
                            presentationMode.wrappedValue.dismiss()
                        }),
                        imageButtonAccessibilityLabel: Accessibility.close))
                    .frame(height: 34 + geometry.safeAreaInsets.top)
                    
                    List {
                        Section {
                            // 你的列表行内容
                        }
                        .listSectionSeparator(.hidden)
                        .listRowSeparator(.hidden)
                    }
                    .listStyle(.plain)
                    .scrollContentBackground(.hidden) // iOS16+ 隐藏默认背景
                    .padding(.top, -15)
                    .padding(.leading, -15)
                    .padding(.trailing, -15)
                    .padding(.bottom, -15)
                }
            }
            .ignoresSafeArea()
        }
        .navigationBarBackButtonHidden()
        .navigationBarTitleDisplayMode(.inline)
    }
}

额外注意点 #

• 检查SaudiaNavigationView内部是否有硬编码的背景色，避免覆盖传入的颜色参数
• 切换深浅模式测试，确认导航栏和List背景色完全一致
• 若只支持iOS16+，可以删掉init()里的UITableView外观设置，避免不必要的全局影响

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