CODEWITHSUNDEEP
iosswiftswiftui
Sorin Lica
Sorin Lica

Reputation: 7636

Fill the Section background in SwiftUI Form

I have to fill that background of a Section with a certain color like this enter image description here

By now I tried 

NavigationView {
            Form {
                Section {
                    Text("Error message!")
                    }.background(Color.red.opacity(0.2))

                Section {
                    Text("Label 1")
                }
                Section {
                    Text("Label 2")
                }
            }.navigationBarTitle("title", displayMode: NavigationBarItem.TitleDisplayMode.inline)
        }

but, there seem to be a predefined padding, so I can't fill the margins

enter image description here

Upvotes: 4

Views: 6380

Answers (2)

Richard Torcato
Richard Torcato

Reputation: 2762

Add .listRowBackground(Color.red.opacity(0.2)) to your section

NavigationView {
            Form {
                Section {
                    Text("Error message!")
                 }.listRowBackground(Color.red.opacity(0.2))

                Section {
                    Text("Label 1")
                }
                Section {
                    Text("Label 2")
                }
            }.navigationBarTitle("title", displayMode: NavigationBarItem.TitleDisplayMode.inline)
        }

and if you want to clear the background of a section use:

.listRowBackground(Color.clear)

if you want to make the list transparent add the above to sections and add this to your list:

.scrollContentBackground(.hidden)

on the list

Upvotes: 2

Maki
Maki

Reputation: 489

Maybe this will help, at least in Simulator this seems to be a solution to your request:

        NavigationView {
            Form {
                Section {
                    HStack {
                        Text("Error message!")
                        Spacer()
                    }
                        .padding(.vertical)
                        .listRowInsets(EdgeInsets())
                }
                .padding(.horizontal)
                .background(Color.red.opacity(0.2))

                Section {
                    Text("Label 1")
                }
                Section {
                    Text("Label 2")
                }
            }
                .navigationBarTitle("title", displayMode: .inline)
        }

Upvotes: 5

Related Questions