提问人：Summer 提问时间：5/8/2021 更新时间：5/8/2021 访问量：1753
删除 HStack 和 VStack 之间的多余空间？
Removing extra space between HStack and VStack?
问：
我的文本“Line1”下面有太多空间。我想将图像向上移动更多，但不确定如何摆脱所有这些空间？这是针对一个小部件的，所以很想听听有关如何让它为所有设备正确调整大小的任何建议！
var body: some View {
ZStack {
Color("GoodBackground")
VStack(alignment: .leading) {
HStack {
Text("Line1")
.foregroundColor(Color("Orange"))
.bold()
.font(.system(size: 17.5))
.padding(.top)
Spacer()
Image("CheckmarkWhiteCircle25x25")
.padding(.top)
}
.padding()
VStack(alignment: .leading) {
Image("WidgetMachine67x30")
Text("State")
.foregroundColor(Color("Toolstext"))
.font(.system(size: 15))
//.font(family == .systemLarge ? .title :
// .headline)
.padding(.top, family == .systemLarge ? -15
: 0)
Text("Last update 4.16.2021")
.foregroundColor(Color("Toolstext"))
.font(.system(size: 10))
.opacity(0.5)
Spacer()
Spacer()
}
.padding()
}
}
答：
6赞
jnpdx
5/8/2021
#1
在第一个 上，您可以添加以下 ：VStackspacing0
VStack(alignment: .leading, spacing: 0) {
您还有几个修饰符，它们也增加了间距。您可以将它们更改为 ，这将删除多余的填充。padding().padding(.horizontal)
有时，将 s 放在不同的元素周围以查看真正占用空间的内容对于调试很有用。例如，这是我的调试版本的样子（请注意，我必须更改图像和颜色名称，并提供默认大小，我没有您的图像或颜色）：.border
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)
}
}
}
评论