如何在 SwiftUI 的 ScrollView 中制作动画？ SwiftUI 中的手风琴风格动画

Question

我正在尝试使用 SwiftUI 构建带有动画的手风琴样式视图。但是，如果我将其包装到 ScrollView 中，动画将无法正常工作。下面是我正在尝试解决的代码。

struct ParentView: View {
    @State var isPressed = false
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                Group {
                    SampleView(index: 1)
                    SampleView(index: 2)
                    SampleView(index: 3)
                    SampleView(index: 4)
                }.border(Color.black).frame(maxWidth: .infinity)
            }.border(Color.green)
        }
    }
}

struct SampleView: View {
    @State var index: Int
    @State var isPressed = false
    var body: some View {
        Group {
            HStack(alignment:.top) {
                VStack(alignment: .leading) {
                    Text("********************")
                    Text("This View = \(index)")
                    Text("********************")
                }
                Spacer()
                Button("Press") { self.isPressed.toggle() }
            }

            if isPressed {
                VStack(alignment: .leading) {
                    Text("********************")
                    Text("-----> = \(index)")
                    Text("********************")
                }.transition(.slide).animation(.linear).border(Color.red)
            }
        }

    }
}

下面是我面临的问题的屏幕截图。

Answer 1

要使其具有动画效果，请将 self.isPressed.toggle() 包裹在 withAnimation 闭包中。

Button("Press") { withAnimation { self.isPressed.toggle() } }