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

Question

我已经添加了spacer(minLength: 5)，但它却采用了minLength。

我该如何指定文本之间的间距？

我附上了一张截图供参考。我想要减少内部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")
            }
        }
    }
}

- Let's_Create

---

等等，Rhea已经做到这一步了？我喜欢这个例子xD。 - Mahesh Jamdade

顺便说一下，这并不是故意的，问题是大约两年前发布的。 - Let's_Create

这个例子非常符合角色，我很惊讶你在2020年6月之前就写出了这个例子。 - Mahesh Jamdade

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

- Marius Waldal

Answer 2

您可以在初始化器中提供一个值来为您的SwiftUI堆栈添加间距，例如：

VStack

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

HStack

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

- PinkeshGjr

Answer 3

为了更多的灵活性，还有.padding(...)：

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

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

- smat88dd

Answer 4

//alignment is optional
   HStack(alignment: .center, spacing: 20) {
        // Add your views here
        Text("View 1")
            .frame(width: 100, height: 100)
            .background(Color.blue)
        
        Text("View 2")
            .frame(width: 100, height: 100)
            .background(Color.red)
        
        Text("View 3")
            .frame(width: 100, height: 100)
            .background(Color.green)
    }

- Divyansh Chaudhary