水平 ScrollView (SwiftUI) 中的動畫展開/折疊組

Question

賞金將在 6 天后到期。 這個問題的答案有資格獲得+50聲望獎勵。 Sorin Lica想引起更多人對這個問題的關注。

我有一個簡單的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!
    }
}