16

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:

enter image description here

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()
    }
}
SwiftedMind
  • 3,701
  • 3
  • 29
  • 63

1 Answers1

20

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()
                }
            }
    }
}
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Asperi
  • 228,894
  • 20
  • 464
  • 690
  • 8
    Hey, is it possible to automatically determine the cell height? I can’t figure out how you would do this – SwiftedMind Apr 17 '20 at 15:31
  • @Quantm perhaps you can try and get the cell height using the GeometryReader – sheriff_paul Feb 01 '21 at 09:05
  • Or use nil, that should set it to default – Alec O Feb 13 '23 at 16:08
  • 1
    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())` – Marco May 09 '23 at 18:39
  • 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. https://stackoverflow.com/questions/76418666/swiftui-list-animations-are-not-smooth-when-adding-elements-to-a-vstack-in-a-lis/76418792?noredirect=1#comment134751255_76418792 – alionthego Jun 06 '23 at 23:24