Is there a way to move HStack to leading?

Question

I am having a problem with HStack which has bigger width than the parent view showing centre not leading.

struct WidgetEntryView : View {
    var entry: Provider.Entry
    
    var body: some View {
        ZStack {
            Color(.red)
            HStack {
                Text("haha1")
                    .frame(width: 50)
                Text("haha2")
                    .frame(width: 50)
                Text("haha3")
                    .frame(width: 50)
                Text("haha4")
                    .frame(width: 50)
                Text("haha5")
                    .frame(width: 50)
                Text("haha6")
                    .frame(width: 50)
                Text("haha7")
                    .frame(width: 50)
                Text("haha8")
                    .frame(width: 50)
            }
        }
    }
}

I'm creating a widget with some data on it. It's a medium size widget, and as you can see, HStack width gets bigger than Widget width, so it looks like below.

https://i.stack.imgur.com/uG4wO.png

Currently, anchor point of HStack is the centre, so it's showing from the centre, but I want to move it to leading so that it starts from haha1.

How can I achieve this?

score 0 · Accepted Answer · answered May 13 '23 at 15:41

struct WidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        ZStack {
            Color(.red)
            Color.clear
                .overlay(
                    HStack {
                        Text("haha1")
                            .frame(width: 50)
                        Text("haha2")
                            .frame(width: 50)
                        Text("haha3")
                            .frame(width: 50)
                        Text("haha4")
                            .frame(width: 50)
                        Text("haha5")
                            .frame(width: 50)
                        Text("haha6")
                            .frame(width: 50)
                        Text("haha7")
                            .frame(width: 50)
                        Text("haha8")
                            .frame(width: 50)
                    }, alignment: .leading
                )

        }
    }
}

did a trick.

score 0 · Answer 2 · answered May 17 '23 at 05:44

Both the HStack and ZStack expect to be as wide as their contents, and so both end up being larger than the widget width.

The way to prevent that is to make sure its content has a flexible size / smaller min width. The simplest would be adding a frame on the stack that has a min width and aligns the stack within it along its leading edge:

ZStack {
    Color(.red)
    HStack {
        ...
    }
    .frame(minWidth: 0, alignment: .leading)
}

score -1 · Answer 3 · answered May 15 '23 at 06:02

Another way: Use GeometryReader

When using a GeometryReader, child objects are automatically aligned to the left. (This may also be a trick)

struct WidgetEntryView : View {
    var entry: Provider.Entry
    
    var body: some View {
        GeometryReader { _ in  // Wrap with GeometryReader.
            ZStack {
                Color(.red)
                
                HStack {
                    Text("haha1")
                        .frame(width: 50)
                    Text("haha2")
                        .frame(width: 50)
                    Text("haha3")
                        .frame(width: 50)
                    Text("haha4")
                        .frame(width: 50)
                    Text("haha5")
                        .frame(width: 50)
                    Text("haha6")
                        .frame(width: 50)
                    Text("haha7")
                        .frame(width: 50)
                    Text("haha8")
                        .frame(width: 50)
                }
            }
        }
    }
}

Is there a way to move HStack to leading?

3 Answers3