SwiftUI - Animations triggered inside a View that's in a list doesn't animate the list as well

Question

I have a List that's displaying two Views of the same type. When you tap on one of the views, they change their height with an animation.

However, the List those views are embedded in doesn't animate which results in an ugly glitch because the height of the List row changes instantly, while the actual view inside that row is animated:

How can I make the List animate as well? I tried addinga .animation modifier to it but that doesn't do anything.

I also don't want to move the tapGesture out of the view. The view should be self-contained and not rely on some other view to control it (I think that's what MVVM is about)

thanks!

import SwiftUI

struct SubView: View {
    @State var change: Bool = false

    var body: some View {
        Rectangle()
            .frame(width: 200, height: change ? 300 : 200)
            .foregroundColor(Color.red)
            .onTapGesture {
                withAnimation {
                    self.change.toggle()
                }
        }
    }
}

struct Test: View {

    var body: some View {
        List {
            SubView()
            SubView()
        }
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

Hi, did you make any progress on this? I'm having exactly the same thing. — Michael Forrest
– Michael Forrest, Commented Feb 20, 2020 at 14:24
I haven't really had time since then, unfortunately. Might be a bug in swiftUI — SwiftedMind
– SwiftedMind, Commented Feb 21, 2020 at 7:20

Martijn Pieters · Accepted Answer · 2022-08-23 13:59:11Z

26

The solution is just to make height animatable continuously, by providing explicit animatable modifier for this.

Here is working approach. Tested with Xcode 11.4 / iOS 13.4.

demo

Implementation of simple helper modifier

struct AnimatingCellHeight: AnimatableModifier {
    var height: CGFloat = 0

    var animatableData: CGFloat {
        get { height }
        set { height = newValue }
    }

    func body(content: Content) -> some View {
        content.frame(height: height)
    }
}

Modified using view (other parts unchanged)

struct SubView: View {
    @State var change: Bool = false

    var body: some View {
        Rectangle()
            .frame(width: 200)
            .modifier(AnimatingCellHeight(height: change ? 300 : 200))
            .foregroundColor(Color.red)
            .onTapGesture {
                withAnimation {
                    self.change.toggle()
                }
            }
    }
}

edited Aug 23, 2022 at 13:59

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Mar 26, 2020 at 18:27

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SwiftedMind Over a year ago

Hey, is it possible to automatically determine the cell height? I can’t figure out how you would do this

sheriff_paul Over a year ago

@Quantm perhaps you can try and get the cell height using the GeometryReader

Alec O Over a year ago

Or use nil, that should set it to default

Marco Over a year ago

I fixed a glitchy Image animation in a subview by modifying the body of the modifier to round the height like this: content.frame(height: height.rounded())

alionthego Over a year ago

I have a similar problem with elements in a VStack inside a List. But I don't have any specific frame height to work with. stackoverflow.com/questions/76418666/…

|

Aitor Pagán · Accepted Answer · 2024-11-28 13:40:35Z

0

I recently found that embedding your row view within a ScrollView will apply your desired animation without making that weird List animation for height calculation, for instance:

import SwiftUI

struct SubView: View {
    @State var change: Bool = false

    var body: some View {
        Rectangle()
            .frame(width: 200, height: change ? 300 : 200)
            .foregroundColor(Color.red)
            .onTapGesture {
                withAnimation {
                    self.change.toggle()
                }
        }
    }
}

struct Test: View {

    var body: some View {
        List {
            ScrollView { SubView() }
            ScrollView { SubView() }
        }
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

answered Nov 28, 2024 at 13:40

Aitor Pagán

4237 silver badges19 bronze badges

2 Comments

Matt Corey Jan 21 at 22:51

This... this works decently well. But why? It seems like filling a List with a bunch of ScrollViews is a bad idea... have you come across any side effects, like weird CPU usage?

Aitor Pagán Jan 23 at 7:15

Not yet. I hope Apple fix this soon, because it makes no sense. The truth is that DisclosureGroup works fine without any trick

Collectives™ on Stack Overflow

SwiftUI - Animations triggered inside a View that's in a list doesn't animate the list as well

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related