首页 > 解决方案 > 如何在 SwiftUI 的 ScrollView 中制作动画?SwiftUI 中的手风琴风格动画

问题描述

我正在尝试使用 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)
            }
        }

    }
}

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

在此处输入图像描述

在此处输入图像描述

标签: iosswiftswiftui

解决方案


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

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

在此处输入图像描述


推荐阅读