HStack fill whole width with equal spacing

Question

I have an HStack:

struct BottomList: View {
    var body: some View {
        HStack() {
            ForEach(navData) { item in
                NavItem(image: item.icon, title: item.title)
            }
        }
    }
}

*How do I perfectly center its content with equal spacing automatically filling the whole width?

FYI just like Bootstraps CSS class .justify-content-around

Tierratiersten

Answer 1

The frame layout modifier, with .infinity for the maxWidth parameter can be used to achieve this, without the need for an additional Shape View.

struct ContentView: View {
    var data = ["View", "V", "View Long"]

    var body: some View {
    VStack {

        // This will be as small as possible to fit the data
        HStack {
            ForEach(data, id: \.self) { item in
                Text(item)
                    .border(Color.red)
            }
        }

        // The frame modifier allows the view to expand horizontally
        HStack {
            ForEach(data, id: \.self) { item in
                Text(item)
                    .frame(maxWidth: .infinity)
                    .border(Color.red)
            }
        }
    }
    }
}

Diplo

When used with an Image, this adds extra horizontal padding to each image, thus causing misalignment. Cheers. – Annamarieannamese

Answer 2

I inserted Spacer() after each item...but for the LAST item, do NOT add a Spacer():

struct BottomList: View {
    var body: some View {
        HStack() {
            ForEach(data) { item in
                Item(title: item.title)
                if item != data.last { // match everything but the last
                  Spacer()
                }
            }
        }
    }
}

Example list that is evenly spaced out even when item widths are different:

(Note: The accepted answers .frame(maxWidth: .infinity) did not work for all cases: it did not work for me when it came to items that have different widths)

Legwork

While I don't love it, using the .frame(maxWidth: .infinity) didn't give me the desired look as it grew the frame of each object in the for each instead of keeping them at their defined size. This added the spacing between the objects that I was looking for. – Rocker

Answer 3

The various *Stack types will try to shrink to the smallest size possible to contain their child views. If the child view has an ideal size, then the *Stack will not expand to fill the screen. This can be overcome by placing each child on top of a clear Rectangle in a ZStack, because a Shape will expand as much as possible. A convenient way to do this is via an extension on View:

extension View {
    func inExpandingRectangle() -> some View {
        ZStack {
            Rectangle()
                .fill(Color.clear)
            self
        }
    }
}

You can then call it like this:

struct ContentView: View {
    var data = ["View", "View", "View"]

    var body: some View {
        VStack {

            // This will be as small as possible to fit the items
            HStack {
                ForEach(data, id: \.self) { item in
                    Text(item)
                        .border(Color.red)
                }
            }

            // Each item's invisible Rectangle forces it to expand
            // The .fixedSize modifier prevents expansion in the vertical direction
            HStack {
                ForEach(data, id: \.self) { item in
                    Text(item)
                        .inExpandingRectangle()
                        .fixedSize(horizontal: false, vertical: true)
                        .border(Color.red)
                }
            }

        }
    }
}

You can adjust the spacing on the HStack as desired.

Malinda

No need for additional shape, you only need to add .frame modifier for children views with .infinity value so it expand to fill parent width. Please check @Diplo answer – Chazan

Answer 4

If items are fullwidth compatible, it will be done automatically, you can wrap items between spacers to make it happen:

struct Resizable: View {
    let text: String

    var body: some View {
        HStack {
            Spacer()
            Text(text)
            Spacer()
        }
    }
}

So you. can use it in a loop like:

HStack {
    ForEach(data, id: \.self) { item in
        Resizable(text: item)
    }
}

Forelock

An improvement on this could be: ``` struct Resizable<Content: View>: View { let content: () -> Content var body: some View { HStack { Spacer() content() Spacer() } } } ``` – Cantara

Answer 5

You can also use spacing in stacks ... ie

HStack(spacing: 30){
            
            Image("NetflixLogo")
                .resizable()
                .scaledToFit()
                .frame(width: 40)
            
            Text("TV Show")
            Text("Movies")
            Text("My List")
            
        }
.frame(maxWidth: .infinity)

output result looks like this ...

Subcontract

Answer 6

If your array has repeating values, use array.indices to omit a spacer after the last element.

HStack() {
  ForEach(data.indices) { i in
    Text("\(data[i])")
    if i != data.last {
       Spacer()
    }
  }
}

Cockaleekie

Answer 7

I am not satisfied with the accepted answers, because they leave extra "pseudo-padding" on the leading and trailing sides of the Hstack

This is an example of my solution:

struct EvenlySpacedHStack: View {
    let items: [Int] = [1,2,3]
    var body: some View {
        ZStack() {
            Capsule().foregroundColor(.yellow)
            HStack() {
                ForEach(Array(items.enumerated()), id: \.element) { index, element in
                    
                    switch index {
                    case items.count - 1:
                        Image(systemName: "\(element).circle.fill")
                            .resizable()
                            .aspectRatio(1.0, contentMode: .fit)
                    default:
                        Image(systemName: "\(element).circle.fill")
                            .resizable()
                            .aspectRatio(1.0, contentMode: .fit)
                        Spacer()
                    }
                }
            }
            .padding(8)
        }
        .frame(height: 55)
    }
}

And results in this:

Palaver

Answer 8

Problem With The Provided Answers

Since the provided answers work well in various situations, none of them creates the true space-between spacing behavior similar to CSS, where all elements are equally spaced regardless of the container width.

Using just a plain Spacer between elements may cause elements and text to be shrunk and truncated in smaller containers when there isn't enough space for both the elements and the Spacers, as the Spacer also requires some amount of space.

The results of the provided answers may appear like this:

Solution

However, you can resolve this issue by setting the minimumWidth for the Spacers to 0 and assigning a higher layoutPriority to the desired elements like this:

struct SpaceBetweenView: View {
    
    var body: some View {
        HStack(spacing: 0) {
            ForEach(0..<6, id: \.self) { item in
                if item != 0 {
                    Spacer()
                    // Set the minWidth to 0 so the Spacer can shrink to 0 width
                    // and doesn't block any space required for the Text view below.
                        .frame(minWidth: 0) // <--
                }
                
                Text("Item \(item)")
                    .lineLimit(1)
                    .background(Color.green)
                // Use a higher layoutPriority for the desired view to prevent it from shrinking
                // when there is not enough space in the container
                // for both (the Spacers and the elements).
                    .layoutPriority(1) // <--
            }
        }
        .frame(width: 300, height: 200)
        .border(Color.black)
    }
}

#Preview {
    SpaceBetweenView()
}

By this technique, you can achieve true horizontal space-between behavior for your views regardless of the container size. The text elements will no longer be truncated due to the use of Spacers, and will only truncate when there isn't enough space for the elements themselves.

Result

Tested on Xcode 15.2, Swift 5, iOS 16.6

Sol

This is the most accurate answer. – Oliveolivegreen

Answer 9

you just have to add the .frame(maxWidth: .infinity) modifier to each element

struct BottomList: View {
    var body: some View {
        HStack() {
            ForEach(navData) { item in
                NavItem(image: item.icon, title: item.title)
                   .frame(maxWidth: .infinity)
            }
        }
    }
}

Uninhibited