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

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

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

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.

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