如何在SwiftUI中调整HStack元素之间的间距?

jbose2ul  于 2023-03-16  发布在  Swift
关注(0)|答案(3)|浏览(350)

我添加了spacer(minLength: 5),但它需要minLength。
如何指定文本之间的间距?
我附上了一个截图作为参考。我想减少内部堆栈之间的间距。

HStack {
    Image("Rhea").resizable().cornerRadius(25).frame(width: 50.0, height: 50.0)
        VStack(alignment: .leading) {
            Text("How to enjoy your life without money").bold().font(.system(size: 20))
            HStack {
                Text("Lets create")
                Spacer(minLength: 5)
                Text("3K views")
                Spacer(minLength: 5)
                Text("3 hours ago")
            }
        }
    }
}

2vuwiymt

2vuwiymt1#

spacing属性添加到HStack本身。对于间距(例如10):

HStack {
    Image("Rhea").resizable().cornerRadius(25).frame(width: 50.0, height: 50.0)
    VStack(alignment: .leading) {
        Text("How to enjoy your life without money").bold().font(.system(size: 20))
        HStack(spacing: 10) {
            Text("Lets create")
            Text("3K views")
            Text("3 hours ago")
        }
    }
}
iszxjhcz

iszxjhcz2#

你可以通过在初始化器中提供一个值来将spacing添加到你的SwiftUI栈中,如下所示:

虚拟堆栈

VStack(spacing: 50) {
    Text("SwiftUI")
    Text("rocks")
}

H堆栈

HStack(spacing: 50) {
    Text("SwiftUI")
    Text("rocks")
}

在您的情况下,您可以使用如下.

HStack {
Image("Rhea").resizable().cornerRadius(25).frame(width: 50.0, height: 50.0)
    VStack(alignment: .leading) {
        Text("How to enjoy your life without money").bold().font(.system(size: 20))
        HStack(spacing: 10) {
            Text("Lets create")
            Text("3K views")
            Text("3 hours ago")
        }
    }
}
mqxuamgl

mqxuamgl3#

为了获得更大的灵活性,还有.padding(...)

HStack(spacing: 0) {
  Text("Lets create")
    .padding(.bottom, 10)
  Text("3K views")
    .padding(.bottom, 10)
  Text("3 hours ago")
}

请记住,如果您不指定任何间距或将其设置为nil,则当前HStack的默认间距为10。

相关问题