How to customize row internal content with List in SwiftUI combining collapsable rows?

Question

This is a follow-up question to the following topic.

How can I fix the "Hello World" card inside the row to the top of its cell? It shouldn't move when the second card is coming out by tapping.

Current State:

But inside the row cell it should be alignment to it's top like sketched in this image:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello!")
            List {
                Detail(isExpanded: false)
                Detail(isExpanded: false)
                Detail(isExpanded: false)
            }
        }
    }
}

struct Detail: View {
@State var isExpanded :Bool = false
var body: some View {
    VStack {
        ZStack (alignment: .bottom){
            ZStack (alignment: .center) {
                RoundedRectangle(cornerRadius: 8)
                    .fill(Color(red: 0.0, green: 1.0, blue: 1.0, opacity: 0.5)).frame(height: 115)
                Text("Helloo!")
            }.zIndex(3).frame(height: 115).contentShape(Rectangle()).onTapGesture {
                withAnimation (.linear(duration: 0.1)){
                    self.isExpanded.toggle()
                }
            }
            Button(action: {
            }) {
                ZStack {
                    RoundedRectangle(cornerRadius: 50)
                        .fill(Color(red: 1.0, green: 0.0, blue: 1.0, opacity: 0.5)).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 ? 80 : 0)
                .disabled(!self.isExpanded)
        }
        if(self.isExpanded) {
            Spacer()
        }
        
    }.modifier(AnimatingCellHeight(height: self.isExpanded ? 210 : 115)).background(Color(red: 1.0, green: 0.5, blue: 1, opacity: 0.5))
    
 }
}

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)
    }
}

EDIT

The end result should look like this. The inverted isExpanded Bool is my fault...should be the other way around.

EDIT 2 Code above is updated to the newest try. which you will see in the gif below.

Almost got there....The blue card which I am pressing to expand is moving a little bit up and down (you can clearly see when increasing the click frequency) in the following gif. Otherwise the behaviour is perfect, just the card should do this little wiggle up and down...

Answer 1

do you mean this way? (added VStack + Spacer)

struct Detail: View {
    @State var isExpanded :Bool = false
    var body: some View {
        VStack {
        ZStack {
            ZStack {
                RoundedRectangle(cornerRadius: 8)
                .fill(Color(red: 0.0, green: 1.0, blue: 1.0, opacity: 1.0)).frame(height: 115)
                Text("Hello!")
            }.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)
        }
            Spacer()
        }.modifier(AnimatingCellHeight(height: self.isExpanded ? 120 : 200))
    }
}