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()
        }
    }
}

Here is a tiny example that still has an obvious problem: though the size changes are smoothly animating, the List itself immediately changes its row size. Is there any workaround to make it animate the row size together with the content size I have inside?

Thanks!

Answer 1

When I use a ScrollView it works perfectly fine:

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()
        }
    }
}

I prefer ScrollView over List .