如何调整 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

为HStack本身添加一个spacing属性。 对于例如 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 2

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

虚拟堆栈

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 3

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

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

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