CODEWITHSUNDEEP
swiftswiftuiswiftui-animation
Josh Jaslow
Josh Jaslow

Reputation: 33

HStack inside ScrollView animates weirdly when opening view

So I was trying to implement expanding/contracting rows in a for each embedded in a list view and it turns out the list view cells don't animate smoothly. After checking out this tutorial, it suggests using a scrollview with a foreach because it animates smoother. The expanding/contracting works fine, but there unintended side effects only when I first open the page. The HStack appears to start flattened on the left side of the view and animates expanding to its normal starting position. I've slowed down the animations in the video so it's easier to see, and I removed the ForEach since it doesn't seem to be the cause of the problems. I don't know what is causing this and google searching has yielded no answers. Does anyone here have an answer or at least some advice? Much appreciated

@State var showTemp: Bool = false

var body: some View {
    ScrollView(.vertical, showsIndicators: false) {

        HStack(alignment: .top) {
            Text("Hello")
                .font(.system(size: 32))

            if showTemp {
                VStack {
                    Text("Middle 1")
                    Text("Middle 2")
                    Text("Middle 3")
                    Text("Middle 4")
                    Text("Middle 5")
                }
            }

            Spacer()

            Text("Goodbye")
        }
        .border(Color.black, width: 2)
        .onTapGesture {
            self.showTemp.toggle()
        }
        .background(Color.blue)
        .animation(.default)

    }
    .background(Color.green)
    .onAppear(perform: loadMethod)
}

What's happening (animations have been slowed down)

Upvotes: 0

Views: 210

Answers (1)

Josh Jaslow
Josh Jaslow

Reputation: 33

It seems I've answered my own question after I looked at the problem from a different angle. Using GeogetryReader and setting the frame width of the HStack to geometry.size.width fixed it.

I think this works because without specifying the width, the HStack fills as much area as it can. For some reason, it starts smushed when the view is loaded and then expands to fill its area, which I guess isn't visible unless you apply an animation to it.

Trying to be helpful here, I don't want to be one of those people who answers their own questions but doesn't show what the answer it.

Upvotes: 0

Related Questions