How to expand a row cell smoothly with a custom view in SwiftUI List?

Question

I am trying to expand a row cell (which is a custom view) on tap gesture. The cell height has to be increased and a button is being moved in the expanded area. But I get the following jumpy animation effect. The pressed blue card shall remain steady but instead it jumps around.

Simple Code to reproduce this jumpy animation:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
            List {
                Detail(isExpanded: false)
                Detail(isExpanded: false)
                Detail(isExpanded: false)
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}



struct Detail: View {
    @State var isExpanded :Bool
    var body: some View {
        ZStack {
            ZStack {
                RoundedRectangle(cornerRadius: 8)
                .fill(Color(red: 0.0, green: 1.0, blue: 1.0, opacity: 1.0)).frame(height: 115)
                Text("Hello, World!")
            }.zIndex(3).frame(height: 115).contentShape(Rectangle()).onTapGesture {
                withAnimation {
                    self.isExpanded.toggle()
                }
            }
            Button(action: {
            }) {
                ZStack {
                    RoundedRectangle(cornerRadius: 50)
                        .fill(Color(red: 1.0, green: 0.0, blue: 1.0, opacity: 1.0)).frame(height: 70)
                        .cornerRadius(8)
                        .shadow(radius: 3)
                        Text("Test")
                }
            }.padding([.leading, .trailing], 12)
                .padding(.top, 6)
                .frame(height: 70)
                .buttonStyle(BorderlessButtonStyle())
                .offset(y: self.isExpanded ? 0 : 40)
                .disabled(!self.isExpanded)
        }.frame(height: self.isExpanded ? 120 : 200)
    }
}

I am grateful for any tips or hints on how to smoothe this out.

Edit

When clicked the hello world card should remain aligned at the top in the cell itself. Like so:

score 5 · Accepted Answer · edited Dec 12 '22 at 11:36

5

Just use animatable modifier from this solution

Tested with Xcode 11.4 / iOS 13.4

ZStack {
 // .. other your code here
}
.modifier(AnimatingCellHeight(height: self.isExpanded ? 120 : 200))

edited Dec 12 '22 at 11:36

kometen

6,536
6
41
51

answered May 20 '20 at 13:05

Asperi

228,894
20
464
690

Is it possible to prevent the card I click on to move down? It moves down a little bit together with the second purple card. If you click on it and the second card moves out, the hello world card moves a bit down. But I am trying to keep it steady. The others ones which are not clicked should of course move since the list has to expand. – cocos2dbeginner May 20 '20 at 13:26
I added a screenshot of what I am trying to describe. – cocos2dbeginner May 20 '20 at 13:38
1

@cocos2dbeginner, row internal content design (it is original) does not relate to topic question about smooth animation... one question - one answer. – Asperi May 20 '20 at 13:41
I understand. Therefore I accepted the answer and created a follow-up question: https://stackoverflow.com/questions/61914810/how-to-customize-row-internal-content-with-list-in-swiftui-combining-collapsable – cocos2dbeginner May 20 '20 at 13:49

How to expand a row cell smoothly with a custom view in SwiftUI List?

1 Answers1

Linked