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

Question

我的文本“Line1”下方的空间过多。我想将图像向上移动更多，但不知道如何消除所有空间？这是一个小部件，因此很想听到有关如何使其适合所有设备正确调整大小的建议！

var body: some View {
        ZStack {
                    Color("BackgroundColor")
                  
                    VStack(alignment: .leading) {
                        HStack {
                            Text("Line1")
                             .foregroundColor(Color("Orange"))
                             .bold()
                                .font(.system(size: 17.5))
                                .padding(.top)
                             Spacer()
                        
                            Image("Icon")
                                .padding(.top)
                      
                        }
                        .padding()
                           
                        VStack(alignment: .leading) {
                            
                            Image("Icon2")
                      
                           Text("State")
                            .foregroundColor(Color("white"))
                            .font(.system(size: 15))
                            //.font(family == .systemLarge ? .title :
                                   // .headline)
                            .padding(.top, family == .systemLarge ? -15
                                     : 0)
                            
                            Text("Last update 4.16.2021")
                             .foregroundColor(Color("Color2"))
                             .font(.system(size: 10))
                                .opacity(0.5)
                                
                            Spacer()
                            Spacer()
                        }
                        .padding() 
                        
                    }
                    
                }
                

Answer 1

首先VStack，您可以添加以下spacing内容0：

VStack(alignment: .leading, spacing: 0) {

您还有一些padding()修饰符，它们也会增加间距。您可以将它们更改为.padding(.horizontal)，这将删除多余的填充。

.border有时，将s 放在不同元素周围以查看真正占用空间的内容对于调试很有用。例如，这是我的调试版本的样子（请注意，我必须更改图像和颜色名称并提供默认尺寸，我没有您的图像或颜色）：

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)
        }
    }
}