问题描述
我的文本“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()
}
}
解决方法
在您的第一个 VStack
上,您可以添加 spacing
的 0
:
VStack(alignment: .leading,spacing: 0) {
您还有几个 padding()
修饰符,它们也可以增加间距。您可以将它们更改为 .padding(.horizontal)
,这将删除额外的填充。
有时,将 .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)
}
}
}