How to adjust spacing between HStack elements in swiftUI?

Viewed 48292

I have added spacer(minLength: 5) but it takes the minlenght can I specify the spacing between the text. I have attached a screenshot for reference I want to reduce the spacing between inner 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")
        }
    }
}

enter image description here

3 Answers

Add a spacing attribute to the HStack itself. For a spacing of e.g. 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")
        }
    }
}

You can add spacing inside your SwiftUI stacks by providing a value in the initialiser, like this:

VStack

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

HStack

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

In you case you can use like below.

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

For more flexibility there is also .padding(...):

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

Keep in mind that currently HStacks default spacing is 10, if you dont specify any or set it to nil.

Related