How to adjust spacing between HStack elements in SwiftUI?

Question

I have added spacer(minLength: 5) but it takes the minLength.

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

Duggins

Wait what Rhea got this far? I love the example xD – Isolda

By the way this was not intentional, question was posted about 2 year ago. – Talapoin

the example perfectly fits the character and I am surprised how you wrote this example a year before jun 2020 – Isolda

If you are looking for the correct method to achieve true space-between behavior without hard-coded spacing regardless of the container width, I have posted a detailed answer in another thread here: https://mcmap.net/q/174641/-hstack-fill-whole-width-with-equal-spacing – Pulmonic

Answer 1

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

Helpmeet

Answer 2

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

Hypsometry

Answer 3

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.

Jeunesse

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

Chintzy