ios – SwiftUI: Animating increasing views from the highest downward

I have been messing round with making an attempt to make customized expandable/collapsible views in SwifUI. Beneath is the code for a view that claims “Faucet Me” when “collapsed,” and when tapped, expands to point out every merchandise in objects, together with a button that permits the consumer so as to add objects. I ended up getting one thing that appears like this after I show three such views in a Listing:

Now clearly, this can be a horrendous animation. The view container occupies the wanted area, then the precise view strikes to the center after which expands each upward and downward. Additionally, the animation is clippy when collapsing the view. With an expandable/collapsible view, my objective is for the expanded/conditional a part of the view to cleanly “drop down” from the “faucet me”/nonconditional a part of the view. In different phrases, the “faucet me” half ought to have a static place, somewhat than transferring to the center and going again up, and the expanded a part of the view ought to slide down from the highest. The place am I going mistaken with this implementation and the way can I repair it?

Here is the code for the collapsible view:

struct Collapsible: View {
    @State non-public var isExpanded: Bool = false
    @State non-public var objects: [String] = ["item1", "item2", "item3"]
    
    var physique: some View {
        VStack {
            HStack {
                Textual content("Faucet Me")
                Spacer()
                Textual content("Data")
            }
            .contentShape(Rectangle())
            .onTapGesture {
                withAnimation(.spring()) {
                    isExpanded.toggle()
                }
            }
            
            if isExpanded {
                VStack {
                    ForEach(objects, id: .self) { merchandise in
                        HStack {
                            Textual content("Merchandise")
                            Spacer()
                            Textual content("Data")
                        }
                        .padding(.vertical, 5)
                    }
                    
                    Button("Add Merchandise") {
                        objects.append("new merchandise")
                    }
                }
            }
        }
        .clipped()
        .background(Colour.cyan)
    }
}

I even have some very primary code to show these Collapsible() views in a Listing. You will need to observe that I opted to make use of if isExpanded{...} within the code above somewhat than a .body(...) modifier to broaden the view, as a result of with the latter choice, the checklist occupies additional area when collapsed if the consumer provides to objects. Due to this fact, I need my implementation to both proceed to make use of the if isExpanded{..} resolution, until somebody can repair this concern: SwiftUI: Listing of subviews with variable peak taking additional area

struct ContentView: View {
    var physique: some View {
        Listing {
            Collapsible()
            Collapsible()
            Collapsible()
        }
    }
}