时间戳

首页 > 解决方案 > 删除 HStack 和 VStack 之间的额外空间？

swift - 删除 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() 
                        
                    }
                    
                }

标签： swiftswiftuiwidget

解决方案

在你的第一个VStack，你可以添加spacing一个0：

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

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

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

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

推荐阅读