How to create SwiftUI HStack that adjusts to accommodate the expansion of one of its subviews?

Question

I have a simple horizontal stack comprising three colour bars:

When the yellow bar width is magnified via a gesture, I would expect the purple bar to move to the right to accommodate the expanded yellow bar but instead the yellow bar simply expands UNDERNEATH the purple bar (which remains in into original position).

struct ContentView: View {
@GestureState var scale = CGFloat(1)

var body: some View {
    HStack(spacing: 5) {
        Color(.blue)
            .frame(width: 100, height: 60, alignment: .leading)
        Color(.yellow)
            .frame(width: 100, height: 60, alignment: .leading)
            .scaleEffect(x: scale, y: 1.0, anchor: .leading)

            .gesture(MagnificationGesture()
                .updating($scale, body: { (value, scale, trans) in
                    scale = value
                })

            )
        Color(.purple)
            .frame(width: 100, height: 60, alignment: .leading)
    }
}

}

How can I achieve dynamic adjustment of the HStack layout whilst one of its components is expanding?

Many thanks...

Robert

The scaleEffect does not change the layout it only affects on-screen drawing. If you want to relayout then you need to operate (apply/recalculate scale) to frame of view (color in this case). — Asperi, Oct 23 '20 at 05:58

leorider · Answer 1 · 2020-10-23T07:45:44.240

1

you could try this code:

Color(.yellow)
    .frame(width: CGFloat(100) * scale, height: 60, alignment: .leading)
    .gesture(MagnificationGesture()
                .updating($scale, body: { (value, scale, trans) in
                    scale = value
                })
    )

edited Oct 23 '20 at 07:45

answered Oct 23 '20 at 06:54

leorider

186
5

How to create SwiftUI HStack that adjusts to accommodate the expansion of one of its subviews?

1 Answers1