Thursday, October 1, 2026
HomeiOS Developmentios - SwiftUI - ExpandableView inside VStack

ios – SwiftUI – ExpandableView inside VStack

[ad_1]

I am attempting to have a number of expandable views with animation inside a VStack. I’ve the next code:

struct ContentView: View {
    var physique: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ExpandableView(headerTitle: "First")
                    ExpandableView(headerTitle: "Second")
                    Spacer()
                }
            }
        }
    }
}

And the ExpandableView:

struct ExpandableView: View {
    let headerTitle: String
    @State non-public var collapsed: Bool = true
    
    var physique: some View {
        Button(
            motion: {
                self.collapsed.toggle()
            },
            label: {
                VStack(spacing: 2) {
                    ZStack {
                        Rectangle()
                            .fill(.grey)
                        VStack {
                            Textual content("(headerTitle) Header")
                            if !collapsed {
                                HStack {
                                    Textual content("Textual content A")
                                    Textual content("Textual content B")
                                }
                            }
                        }
                    }
                    .body(top: collapsed ? 52 : 80)
                    ZStack(alignment: .high) {
                        Rectangle()
                            .fill(.grey)
                            .body(top: 204)
                        VStack {
                            Textual content("Content material A")
                            Textual content("Content material B")
                            Textual content("Content material C")
                        }
                    }
                    .body(maxHeight: collapsed ? 0 : .none)
                    .clipped()
                }
            }
        )
        .buttonStyle(PlainButtonStyle())
        .animation(.easeOut, worth: collapsed)
    }
}

The result’s this:
enter image description here

As you’ll be able to see if I open the final expandableView is opens appropriately. Nevertheless if I open the primary one when the second is closed, it really opens the second. It solely opens appropriately the primary one if the second is already open. It appears the VStack will not be rendering appropriately itself. Any concepts why this taking place?
Thanks for the assistance.

[ad_2]

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments