SwiftUI: VStack don't apply to white background color but every other color

Question

I have following code. If I change .background(Color.green) to .background(Color.white) for the VStack the background will be the systemGray I used for the Listbackground.

Has it something to do with the .colorMultiply(Color(UIColor.systemGray4)) property?.

var body: some View {
        NavigationView {
            List {
                Text("Bla bla bla")
                Group {
                VStack {
                    TextField("Server address", text: $serverAddress)
                        .keyboardType(.default)
                    TextField("Server port", text: $serverPortString)
                        .keyboardType(.numberPad)
                }
                }
                .padding()
                .background(Color.green)
                .cornerRadius(8)

// Some more elements
            }
            .navigationBarHidden(false)
            .navigationBarTitle("Connect your Server", displayMode: .large)
        }
        .colorMultiply(Color(UIColor.systemGray4))
        .onTapGesture {
            self.hideKeyboard()
        }

White background that get ignored:

White background that get ignored

Working green background:

Working green background

Andrew · Accepted Answer · 2019-11-04T14:02:51.697

.colorMultiply() adds a color multiplication effect to the view that it is applied on, meaning that it tints it the color that you have added. As your NavigationView is the containing view, all views inside it will be tinted systemGray4.

When you set it to white, the systemGray4 tints that so that it blends in with the background as that is also white.

You could do something like this:

struct ContentView: View {

    @State var serverAddress: String = ""
    @State var serverPortString: String = ""

    let backgroundColor = Color.init(UIColor.systemGray4)

    init() {
        UITableView.appearance().backgroundColor = .clear // or you could set this to systemGray4 and ignore the ZStack
        UITableView.appearance().separatorColor = .clear
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        NavigationView {
            ZStack {
                backgroundColor.frame(maxWidth: .infinity, maxHeight: .infinity).edgesIgnoringSafeArea(.all)
                List {
                    Text("Bla bla bla")
                    .listRowBackground(backgroundColor)

                    Group {
                        VStack {
                            TextField("Server address", text: $serverAddress)
                                .keyboardType(.default)
                            TextField("Server port", text: $serverPortString)
                                .keyboardType(.numberPad)
                        }
                    }
                    .listRowBackground(backgroundColor)
                    .padding()
                    .background(Color.white)
                    .cornerRadius(8)


                    // Some more elements
                }
            }
            .navigationBarHidden(false)
            .navigationBarTitle("Connect your Server", displayMode: .large)

        }
        .onTapGesture {
            print("tapped")
        }
    }
}

Which will give you this result:

Thanks, but than how do I change the background color? Because just .background(Color.white) doesn't modify anything. And UITableView.appearance().backgroundColor isn't nice I think. — HansDeBeer, Nov 04 '19 at 13:41
I have added some code to my answer. I think to get the result that you want you will need to manipulate the `UITableView.appearance()` — Andrew, Nov 04 '19 at 13:57
Thanks :) But isn't there an other way without globally change the UITableView appearance? I think to manipulate it this way isn't a "clean" way to do it. — HansDeBeer, Nov 04 '19 at 14:00
Unfortunately at this time there isn't another way to do it. You could change the `UITableView.appearance()` in `onAppear` and then reset it in `onDisappear`, rather than change it in the `init`. — Andrew, Nov 04 '19 at 14:02

SwiftUI: VStack don't apply to white background color but every other color

1 Answers1