【SwiftUI】ListでRowの開閉アニメーション

SwiftUIのListで、Rowタップ時にRowの高さをアニメーションさせつつ変化させます。

環境

• Swift: 5.3.2
• Xcode: 12.4 (12D4e)
• macOS: Big Sur 11.1 (20C69)

コード

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var selected: UUID?
    @State var scrollTop = false

    var items = (0..<100).map { ItemData(value: $0 * 2 + 10001) }

    var body: some View {
        ScrollViewReader { proxy in
            NavigationView {
                List(items) { item in
                    ItemView(item: Binding.constant(item), parent: Binding.constant(self))
                }
                .listStyle(PlainListStyle())
                .navigationBarTitle(Text("List01"), displayMode: .automatic)
                .navigationBarItems(trailing:
                    Button(scrollTop ? "Top" : "Bottom") {
                        withAnimation {
                            proxy.scrollTo((scrollTop ? items.first : items.last)!.id, anchor: .top)
                            scrollTop = !scrollTop
                        }
                    }
                )
            }
        }
    }
}

struct ItemData: Identifiable {
    var value = 0
    let id = UUID()

    var idString: String {
        get { return String(id.uuidString.prefix(5)) }
    }
}

struct ItemView: View {
    @Binding var item: ItemData
    @Binding var parent: ContentView
    @State var openCell = false

    var body: some View {
        ZStack {
            Color.blue.opacity(0.3)
            VStack {
                Text("Item \(item.idString) => \(item.value)")
                    .frame(maxWidth: .infinity, alignment: .leading)
                Text("--")
                    .multilineTextAlignment(.trailing)
                    .frame(maxWidth: .infinity, alignment: .trailing)
                Spacer()
            }
            .opacity(openCell ? 0 : 1)
            VStack {
                Text((0..<(openCell ? 5 : 1)).map { "Detail \($0)" }.joined(separator: "\n"))
                    .multilineTextAlignment(.trailing)
                    .frame(maxWidth: .infinity, alignment: .trailing)
            }
            .opacity(openCell ? 1 : 0)
        }
        .fixedSize(horizontal: false, vertical: true)
        .modifier(AnimatingCellHeight(height: openCell ? 120 : 60))
        .animation(.linear)
        .contentShape(Rectangle())
        .onTapGesture {
            openCell.toggle()
        }
    }

    init(item: Binding<ItemData>, parent: Binding<ContentView>) {
        _item = item
        _parent = parent
        print("init: \(item.wrappedValue.idString)")
    }
}

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

リポジトリ

問題点

• Rowの高さが固定値で入っている（GeometryReaderを使うとうまくいかなかった）
• アニメーションがぎこちない（modifierか何かがおかしい？）