ios - SwiftUI - 在列表中的 View 内触发的动画也不会为列表设置动画

Question

我有一个 List显示两个 Views同类型。当您点击其中一个 View 时，它们会通过动画更改其高度。

但是，List嵌入的这些 View 没有动画，这会导致丑陋的故障，因为 List 的高度行立即更改，而该行内的实际 View 是动画的:



如何制作 List动画呢？我尝试添加 .animation对其进行修改，但这无济于事。

我也不想移动 tapGesture视线之外。 View 应该是自包含的，而不是依赖其他 View 来控制它(我认为这就是 MVVM 的意义所在)

谢谢!

import SwiftUI

struct SubView: View {
    @State var change: Bool = false

    var body: some View {
        Rectangle()
            .frame(width: 200, height: change ? 300 : 200)
            .foregroundColor(Color.red)
            .onTapGesture {
                withAnimation {
                    self.change.toggle()
                }
        }
    }
}

struct Test: View {

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

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

Answer 1

解决方案是通过为此提供明确的动画修改器来使高度连续动画化。
这是工作方法。使用 Xcode 11.4/iOS 13.4 测试。

简单辅助修饰符的实现

struct AnimatingCellHeight: AnimatableModifier {
    var height: CGFloat = 0

    var animatableData: CGFloat {
        get { height }
        set { height = newValue }
    }

    func body(content: Content) -> some View {
        content.frame(height: height)
    }
}

使用 View 修改(其他部分不变)

struct SubView: View {
    @State var change: Bool = false

    var body: some View {
        Rectangle()
            .frame(width: 200)
            .modifier(AnimatingCellHeight(height: change ? 300 : 200))
            .foregroundColor(Color.red)
            .onTapGesture {
                withAnimation {
                    self.change.toggle()
                }
            }
    }
}

backup