SwiftUI：如何修改包含Form的NavigationView背景色？

要实现只修改视图背景色、保留Form分区原有样式的效果，你需要调整以下几个关键点：

1. 让Form背景透明：Form默认是不透明的，会遮挡底层视图的背景色，需要显式设置其背景为透明。
2. 设置底层背景容器：用ZStack包裹Form，在ZStack底层添加你想要的背景色，并让它忽略安全区域。
3. 修正UITableView外观：除了设置背景透明，还要消除UITableView默认的顶部/底部空白，避免背景色被截断。

修改后的完整代码 #

import SwiftUI

struct TimeView: View {
    @State private var input = 100.0
    @State private var inputUnit: Dimension = UnitDuration.hours
    @State private var outputUnit: Dimension = UnitDuration.minutes
    @FocusState private var inputIsFocused: Bool
    
    let unitTypes = [[UnitDuration.hours, UnitDuration.minutes, UnitDuration.seconds]]
    @State var selectedUnits = 0
    let formatter: MeasurementFormatter
        
    init() {
        formatter = MeasurementFormatter()
        formatter.unitOptions = .providedUnit
        formatter.unitStyle = .long
        
        // 配置UITableView外观，让Form背景透明并消除空白
        UITableView.appearance().backgroundColor = .clear
        UITableView.appearance().tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: CGFloat.leastNormalMagnitude))
        UITableView.appearance().tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: CGFloat.leastNormalMagnitude))
    }
    
    var result: String {
        let inputLength = Measurement(value: input, unit: inputUnit)
        let outputLength = inputLength.converted(to: outputUnit)
        return formatter.string(from: outputLength)
    }
    
    var body: some View {
        NavigationView {
            ZStack {
                // 设置视图背景色，这里用红色示例，可替换为你需要的颜色
                Color.red.edgesIgnoringSafeArea(.all)
                
                Form {
                    Section {
                        TextField("Amount", value: $input, format: .number)
                            .keyboardType(.decimalPad)
                            .focused($inputIsFocused)
                    } header: {
                        Text("Amount to convert")
                    }
                    
                    Picker("Convert from", selection: $inputUnit) {
                        ForEach(unitTypes[selectedUnits], id: \.self) {
                            Text(formatter.string(from: $0).capitalized)
                        }
                    }
                    
                    Picker("Convert to", selection: $outputUnit) {
                        ForEach(unitTypes[selectedUnits], id: \.self) {
                            Text(formatter.string(from: $0).capitalized)
                        }
                    }
                    
                    Section {
                        Text(result)
                    } header: {
                        Text("Result")
                    }
                }
                .background(Color.clear) // 让Form背景透明，露出底层颜色
                .navigationTitle("Time Converter")
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()
                        
                        Button("Done") {
                            inputIsFocused = false
                        }
                    }
                }
                .onChange(of: selectedUnits) { newSelection in
                    let units = unitTypes[newSelection]
                    inputUnit = units[0]
                    outputUnit = units[1]
                }
            }
        }
    }
}

struct TimeView_Previews: PreviewProvider {
    static var previews: some View {
        TimeView()
    }
}

关键说明 #

• ZStack的底层颜色会填充整个视图区域，edgesIgnoringSafeArea(.all)确保颜色延伸到屏幕边缘。
• Form设置.background(Color.clear)后，不再遮挡底层背景，同时保留原有分区的样式。
• UITableView的header和footer设置为极小高度，消除Form默认的顶部/底部空白，让背景色完整显示。

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