如何使用 SwiftUI 列表中的自定義視圖平滑擴展行單元格？

Question

我正在嘗試在點擊手勢上展開一個行單元格（這是一個自定義視圖）。 單元格高度必須增加，並且按鈕正在擴展區域中移動。 但我得到以下跳躍的 animation 效果。 被按下的藍牌應保持穩定，但它會跳來跳去。

重現這個跳躍的 animation 的簡單代碼：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
            List {
                Detail(isExpanded: false)
                Detail(isExpanded: false)
                Detail(isExpanded: false)
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}



struct Detail: View {
    @State var isExpanded :Bool
    var body: some View {
        ZStack {
            ZStack {
                RoundedRectangle(cornerRadius: 8)
                .fill(Color(red: 0.0, green: 1.0, blue: 1.0, opacity: 1.0)).frame(height: 115)
                Text("Hello, World!")
            }.zIndex(3).frame(height: 115).contentShape(Rectangle()).onTapGesture {
                withAnimation {
                    self.isExpanded.toggle()
                }
            }
            Button(action: {
            }) {
                ZStack {
                    RoundedRectangle(cornerRadius: 50)
                        .fill(Color(red: 1.0, green: 0.0, blue: 1.0, opacity: 1.0)).frame(height: 70)
                        .cornerRadius(8)
                        .shadow(radius: 3)
                        Text("Test")
                }
            }.padding([.leading, .trailing], 12)
                .padding(.top, 6)
                .frame(height: 70)
                .buttonStyle(BorderlessButtonStyle())
                .offset(y: self.isExpanded ? 0 : 40)
                .disabled(!self.isExpanded)
        }.frame(height: self.isExpanded ? 120 : 200)
    }
}

我很感激任何關於如何解決這個問題的提示或提示。

編輯

單擊時，hello world 卡片應在單元格本身的頂部保持對齊。 像這樣：

Answer 1

只需使用我的解決方案中的可動畫修改器

使用 Xcode 11.4 / iOS 13.4 測試

ZStack {
 // .. other your code here
}
.modifier(AnimatingCellHeight(height: self.isExpanded ? 120 : 200))