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")
}
}
}
这会给你这样的结果:
我有以下代码。如果我将 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")
}
}
}
这会给你这样的结果: