iosswiftswiftui

How to setup background color of container?


I am begginer in coding in Swift, actually started this week. Please, I am looking for help about changing color of the container from gray to black. I cant anyhow figure out how to change it to any color. Probably missing some simple knowledge.

My code:

private var alertsView: some View {
        NavigationView {
            Form {
                HStack(spacing: 20) {
                    Button(action: {
                        showingAlertSetup = true
                    }) {
                        HStack {
                            Image(systemName: "plus")
                            Text("Add New Alert")
                        }
                        .padding()
                        .foregroundColor(.blue)
                    }
                    Spacer()
                    Button(action: {
                        // Action for adding a recurring alert
                    }) {
                        HStack {
                            Image(systemName: "plus")
                            Text("Add Recurring Alert")
                        }
                        .padding()
                        .foregroundColor(.blue)
                    }
                }
                .padding(.vertical, 8)

                Section(header: Text("Active Alerts")) {
                    ForEach(alertSettings) { alert in
                        alertRow(for: alert)
                    }
                    .onDelete(perform: deleteAlert)
                    .listRowSeparator(.hidden)
                }
            }
            .listStyle(PlainListStyle())
            .navigationTitle("Alerts")
        }
    }

My canvas

I tried using Cursor, but failed.


Solution

  • Assuming you have set the Appearance to Dark, try this approach using .listRowBackground(Color.clear) as shown in the example code:

    struct ContentView: View {
        @State private var showingAlertSetup = false
        
        var body : some View {
            alertsView
        }
        
        @ViewBuilder  // <--- here
        private var alertsView: some View {
            
            NavigationStack {  // <--- here
                Form {
                    HStack(spacing: 20) {
                        Button(action: {
                            showingAlertSetup = true
                        }) {
                            HStack {
                                Image(systemName: "plus")
                                Text("Add New Alert")
                            }
                            .padding()
                            .foregroundColor(.blue)
                        }
                        Spacer()
                        Button(action: {
                            // Action for adding a recurring alert
                        }) {
                            HStack {
                                Image(systemName: "plus")
                                Text("Add Recurring Alert")
                            }
                            .padding()
                            .foregroundColor(.blue)
                        }
                    }
                    .padding(.vertical, 8)
                    .listRowBackground(Color.clear)  // <--- here
                    
                    Section(header: Text("Active Alerts")) {
                        Text("alertSettings") // <--- for my testing
                        //                    ForEach(alertSettings) { alert in
                        //                        alertRow(for: alert)
                        //                    }
                        //                    .onDelete(perform: deleteAlert)
                        //                    .listRowSeparator(.hidden)
                    }
                    .listRowBackground(Color.clear)  // <--- here
                }
                .listStyle(PlainListStyle())
                .navigationTitle("Alerts")
            }
    
        }
        
        func deleteAlert(at offsets: IndexSet) {
            //  offsets.forEach { alertSettings.remove(at: $0) }
        }
    }
    

    Note, NavigationView is deprecated use NavigationStack instead.