如何調整 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。