删除 HStack 和 VStack 之间的额外空间？

如何解决删除 HStack 和 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() 
                        
                    }
                    
                }
                

解决方法

在您的第一个 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)
        }
    }
}