SwiftUI: 如何在列表中正确地动画化内容大小的更改？

Question

import SwiftUI

struct DynamicRectangle: View {
    @State private var isExpanded = false

    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: isExpanded ? 400 : 200)
            .animation(.spring())

        .onTapGesture {
            self.isExpanded.toggle()
        }
    }
}

struct ContentView: View {

    var body: some View {
        List {
            DynamicRectangle()
            DynamicRectangle()
            DynamicRectangle()
        }
    }
}

这里是一个小例子，但还存在明显问题：尽管大小变化平滑地进行动画处理，但列表本身却立即更改其行大小。有没有什么解决方法可以使它与我所拥有的内容大小一起进行动画处理呢？

谢谢！

- totsamyzed

Answer 1

当我使用 ScrollView 时，它可以完美地工作：

import SwiftUI

struct DynamicRectangle: View {
    @State private var isExpanded = false

    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: isExpanded ? 400 : 200)
            .animation(.spring())

        .onTapGesture {
            self.isExpanded.toggle()
        }
    }
}

struct ContentView: View {

    var body: some View {
        ScrollView {
            DynamicRectangle()
            DynamicRectangle()
            DynamicRectangle()
        }
    }
}

我更喜欢使用 ScrollView 而不是 List。

- krjw

---

这很意外。虽然我们失去了一些列表功能（例如处理.onMove和.onDelete事件），但动画效果非常好。感谢您指出这一点！ - totsamyzed

我遇到了同样的问题，发现如果不改变行的大小而是添加另一行，则动画会更加流畅。这种方法可能并不总是可行，但在我的情况下，我不想失去.onMove和.onDelete事件的处理。 - Peter Schumacher