SwiftUI How to change Background Color of NavigationView with Form?

Question

Is there possibility to change background color of this view?

Note: I dont want to change form sections color, i want to change background color of view.

`.background(Color.red) does not effect.

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

I tried code above too but didnt work.

I'm waiting for your helps. Thank you.

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
    }
    
    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 {
            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")
                }
            }
            .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()
    }
}

score 0 · Accepted Answer · answered Feb 11 '23 at 00:51

You need to hide the default background of the Form to make any background colors visible.

Add this modifier to Form: .scrollContentBackground(.hidden).

So if you're aiming to make the background red, your code will look like this:

import SwiftUI

struct ContentView: 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
    }
    
    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 {
            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")
                }
            }
            .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]
            }
            //MARK: Here's the solution
            .scrollContentBackground(.hidden)
            .background(Color.red)
        }
        
        
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SwiftUI How to change Background Color of NavigationView with Form?

1 Answers1