ios – Why does width of LazyHStack change whereas scrolling when one merchandise of various width is included?

Why does width of LazyHStack change whereas scrolling when the stack has one merchandise with a unique width than the opposite objects?

But, the width of the LazyHStack stays the identical whereas scrolling when all objects are the identical width.

Observe a change in width within the instance beneath. The worth of widerSize within the code beneath is 140. I’m printing the width of the lazy h stack every time it modifications, and it may be seen that the width modifications when the merchandise that’s of wider dimension scrolls previous the midpoint of the display screen.

Nonetheless, if I make widerSize the identical worth as dimension (similar to 100), so that each one objects within the LazyHStack would have the identical width, this modification in width of the LazyHStack doesn’t happen. The worth stays the identical even when scrolling:

I’m utilizing this width to drive one other a part of the app, and it’s inflicting points for me.

Methods to cease the change in width of the LazyHStack whereas scrolling when one merchandise of the LazyHStack is wider? The code is included beneath:

import SwiftUI

struct ContentView: View {
    @State non-public var dimension: CGFloat = 100
    @State non-public var widerSize: CGFloat = 140
    
    @State non-public var offset = CGFloat.zero
    @State non-public var width = CGFloat.zero
    
    @State non-public var scrollTarget: Int?
    
    var physique: some View {
        ScrollView(.horizontal) {
            ScrollViewReader { reader in
                LazyHStack(spacing: 0) {
                    ForEach(1...17, id: .self) { merchandise in
                        CircleView(merchandise: merchandise, colour: Shade.blue, dimension: dimension)
                    }
                    
                    ForEach(18...18, id: .self) { merchandise in
                        CircleView(merchandise: merchandise, colour: Shade.yellow, dimension: widerSize)
                    }
                    
                    ForEach(19...20, id: .self) { merchandise in
                        CircleView(merchandise: merchandise, colour: Shade.inexperienced, dimension: dimension)
                    }
                }
                .body(peak: widerSize)
                .onAppear {
                    scrollTarget = 20
                }
                .onChange(of: scrollTarget) { goal in
                    if let goal = goal {
                        scrollTarget = nil

                        withAnimation {
                            reader.scrollTo(goal)
                        }
                    }
                }
                .background( GeometryReader { geometry in
                    Shade.clear.desire(
                        key: ViewWidthKey.self,
                        worth: geometry.dimension.width
                    )
                })
                .onPreferenceChange(ViewWidthKey.self) { worth in
                    print("width :: (worth)")
                    width = worth
                }
            }
        }
    }
}

struct ViewWidthKey: PreferenceKey {
    typealias Worth = CGFloat
    static var defaultValue = CGFloat.zero
    static func scale back(worth: inout Worth, nextValue: () -> Worth) {
        worth += nextValue()
    }
}

struct CircleView: View {
    var merchandise: Int
    var colour: Shade
    var dimension: CGFloat

    var physique: some View {
        VStack {
            Textual content("(merchandise)")
        }
            .foregroundColor(.white)
            .body(width: dimension, peak: dimension)
            .background(colour)
            .cornerRadius(50)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}