swiftswiftuiswiftui-navigationviewswiftui-form

SwiftUI How to change Background Color of NavigationView with Form?


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.

MyView

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()
    }
}

Solution

  • 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()
        }
    }