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

Question

我的文字“第 1 行”下面 space 太多了。我想将图像向上移动更多，但不确定如何摆脱所有 space？这是一个小部件，所以很想听听有关如何让它针对所有设备正确调整大小的任何建议！

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

Answer 1

在您的第一个 VStack 上，您可以添加一个 spacing of 0:

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

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

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

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

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

Removing extra space between HStack and VStack?

widget

swift

swiftui