如何解决在 Z 和 HStack 中添加 2 个背景?
color.red 是我的小部件主背景,但我想在文本“Line1”和图像“2”后面的顶部添加黑色背景。所以基本上是一个在文本和图像下方横跨顶部的黑条。
var body: some View {
ZStack {
Color.red
vstack(alignment: .leading,spacing: 0) {
HStack {
Text("Line1")
.foregroundColor(.orange)
.bold()
.font(.system(size: 17.5))
.padding(.top)
Spacer()
Image("2")
.resizable()
.frame(width: 25,height: 25)
.padding(.top)
}
.padding(.horizontal)
.border(Color.green)
vstack(alignment: .leading) {
Image("2")
.resizable()
.frame(width: 67,height: 30)
Text("State")
.foregroundColor(Color.green)
.font(.system(size: 15))
Text("1")
.foregroundColor(Color.blue)
.font(.system(size: 10))
.opacity(0.5)
Spacer()
Spacer()
}
.padding(.horizontal)
.border(Color.blue)
}
}
}
解决方法
您可以为第一个 .background
添加 HStack
修饰符:
HStack {
//content here
}
.padding(.horizontal)
.border(Color.green)
.background(Color.black)
请记住,修饰符的顺序很重要,因此如果您将 background
放在内边距之前,内边距将不会具有该背景颜色 -- 这就是我最后使用它的原因。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。