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...

Well, actually as for it is not clear what should be achieved at the end (also that inverted "isExpanded" flag confuses me). Should all content just be moved to the top (then why is that free space below)? Should Hello button be resized to top? How should new layout behave on animation? etc. ... Because strict understanding of your request resulted in what Chris proposed below (my first try was the same, but I did not like what appeared). — Asperi
the inverted flag is my fault. You're right. But I added a screenshot of what I am trying to achieve. From a concept point of view Chris is very close. But the blue card is moving a little bit up and down upon a click. It should just stay steady without moving. And the second view underneath should be moved below the "Hello!" card (like in the drawing). — cocos2dbeginner

Chris Chris · Accepted Answer · 2020-05-20T15:25:51

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

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

1 Answers