如何解决HStack 和 TextField 的角半径未更新
这是我的内容视图的代码。如您所见,我已经尝试过使用 HStack 来包含 TextField,也尝试过单独使用 TextField。角半径与灰色搜索矩形没有任何关系 - 边缘仍然是完美的矩形。
@State var searchText = ""
var body: some View {
ZStack {
//function that's the content argument to ZStack
Color((.systemGreen))
vstack {
Text("App")
.font(.largeTitle)
.foregroundColor(Color.white)
//HStack {
TextField("Searchstring",text: $searchText)
.padding()
.background(Color(.systemGray6))
.padding()
.cornerRadius(12)
//}
// .padding()
// .background(Color(.systemGray6))
// .padding(.horizontal)
// .cornerRadius(12)
}
}
}
}
这就是预览的样子,在所有情况下: corner radius fails to show in preview
解决方法
问题出在这里:
.padding() /// 1.
.background(Color(.systemGray6)) /// 2.
.padding() /// 3.
.cornerRadius(12) /// 4.
- 您的文本字段有一个
padding
-
background
在padding
之后被应用
- 在
padding
之后添加另一个background
- 您在
cornerRadius
之上应用另一个padding
因此,舍入的是 padding
,而不是 background
。
相反,您希望在 cornerRadius
之后立即应用 background
。
struct ContentView: View {
@State var searchText = ""
var body: some View {
ZStack {
//function that's the content argument to ZStack
Color((.systemGreen))
VStack {
Text("App")
.font(.largeTitle)
.foregroundColor(Color.white)
TextField("Searchstring",text: $searchText)
.padding()
.background(Color(.systemGray6))
.cornerRadius(12) /// corner radius immediately after the background
.padding() /// extra padding outside the background
}
}
}
}
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。