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

By the way this was not intentional, question was posted about 2 year ago. — Let's_Create, Apr 12 '21 at 07:11
the example perfectly fits the character and I am surprised how you wrote this example a year before jun 2020 — Mahesh Jamdade, Apr 12 '21 at 14:03

score 90 · Accepted Answer · edited Jul 31 '21 at 04:35

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

PinkeshGjr · Answer 2 · 2020-10-08T07:02:27.127

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

score 5 · Answer 3 · answered Mar 03 '22 at 06:29

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.

Divyansh Chaudhary · Answer 4 · 2023-06-26T07:07:51.130

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

How to adjust spacing between HStack elements in SwiftUI?

4 Answers4

Linked