如何在swiftUI中调整HStack元素之间的间距？

Question

我添加了spacer（minLength：5），但是我可以指定 minlenght 来指定文本之间的间距。我已经附上了一个屏幕截图，以供参考，我想减少内部hstack之间的间距。

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

Answer 1

您可以通过在初始化程序中提供一个值来添加spacing到SwiftUI堆栈中，如下所示：

虚拟堆栈

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

堆栈

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

Answer 2

将间距属性添加到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")
        }
    }
}

Answer 3

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

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

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