水平滚动视图中的动画 Expand/Collapse 组 (SwiftUI)

Question

我有一个简单的 ForEach 根据 expanded 标志显示 5 或 10 个 Text 视图。所有内容都包裹在水平 ScrollView 中，因为文本可能很长。展开组时的动画看起来不错，但折叠组时有一个小的弹跳，视图会上下移动。如果我删除 ScrollView，则不会发生这种情况。知道什么会导致这种弹跳吗？

struct ContentView: View {
    @State var expanded = false
    let colors: [Color] = [.red, .green, .blue, .orange, .blue, .brown, .cyan, .gray, .indigo, .mint]
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                VStack(spacing: 20) {
                    ForEach(colors.prefix(upTo: expanded ? 10 : 5), id: \.self) { color in
                        Text(color.description.capitalized)
                    }
                }
            }
            Button("Expand/collapse") {
                expanded.toggle()
            }
            Spacer()
        }.animation(.easeIn(duration: 1))
    }
}

Answer 1

您需要为动画使用值：

struct ContentView: View {
    @State var expanded = false
    let colors: [Color] = [.red, .green, .blue, .orange, .blue, .red, .green, .blue, .orange, .blue]
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                VStack(spacing: 20) {
                    ForEach(colors.prefix(upTo: expanded ? 10 : 5), id: \.self) { color in
                        Text(color.description.capitalized)
                    }
                }
            }
            Button("Expand/collapse") {
                expanded.toggle()
            }
            Spacer()
        }.animation(.easeIn(duration: 1), value: expanded) // <<: Here!
    }
}

水平滚动视图中的动画 Expand/Collapse 组 (SwiftUI)

Animated Expand/Collapse group in horizontal ScrollView (SwiftUI)

animation

ios

swiftui