SwiftUI:VStack 不适用于白色背景颜色,但适用于所有其他颜色

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

我有以下代码。如果我将 VStack 的 .background(Color.green) 更改为 .background(Color.white),背景将是我用于 Listbackground 的 systemGray。

.colorMultiply(Color(UIColor.systemGray4))属性有关系吗?

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

被忽略的白色背景:

工作绿色背景:

.colorMultiply() 向应用它的视图添加颜色倍增效果,这意味着它将它着色为您添加的颜色。由于您的 NavigationView 是包含视图,因此其中的所有视图都将被着色 systemGray4.

当您将其设置为 white 时,systemGray4 会着色,以便它与背景融为一体,因为这也是 white


你可以这样做:

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

这会给你这样的结果: