SwiftUI：扩大/缩小列表单元格

Question

我正在开发一个List可以扩展/收缩的 SwiftUI 单元，这是一个非常简单的东西，您可以在很多情况下看到。类似于以下内容（以下是在 中实现的UIKit）：

老实说，我正在努力在 SwiftUI 上实现同样的功能。我尝试了几种方法：

1）第一种方法：有条件地包含单元格底部：

import SwiftUI

struct Approach1: View {
    @State private var selectedIndex = -1

    var body: some View {
        List {
            ForEach(0...20, id: \.self) { idx in
                Cell(isExpanded: self.selectedIndex == idx)
                    .onTapGesture {
                        withAnimation {
                            self.selectedIndex = (self.selectedIndex == idx) ? -1 : idx
                        }
                    }
            }
        }
    }
}

private struct Cell: View {
    let isExpanded: Bool
    var body: some View {
        VStack(alignment: .leading) {
            Text("Hello World")
                .animation(nil)
            if isExpanded {
                VStack {
                    Text("Lorem ipsum")
                    Text("Lorem ipsum")
                    Text("Lorem ipsum")
                    Text("Lorem ipsum")
                    Text("Lorem ipsum")
                    Text("Lorem ipsum")
                }
            }
        }
    }
}

struct Approach1_Previews: PreviewProvider {
    static var previews: some View {
        Approach1()
    }
}

不过，在这种情况下，SwiftUI 不会对单元格展开进行动画处理，它只会对出现/消失的底部内容进行动画处理，结果非常奇怪（我放慢了动画速度以便让您看到）：

2）第二种方法：创建单元的两个版本：

import SwiftUI

struct Approach2: View {
    @State private var selectedIndex = -1

    var body: some View {
        List {
            ForEach(0...20, id: \.self) { idx in
                Group {
                    if self.selectedIndex == idx {
                        ExpandedCell()
                            .onTapGesture {
                                self.selectedIndex = -1
                            }
                    } else {
                        Cell()
                            .onTapGesture {
                                self.selectedIndex = idx
                            }
                    }
                }
            }
        }
    }
}

private struct Cell: View {
    var body: some View {
        Text("Hello world")
    }
}

private struct ExpandedCell: View {
    var body: some View {
        VStack(alignment: .leading) {
            Cell()
            Text("Lorem ipsum")
            Text("Lorem ipsum")
            Text("Lorem ipsum")
            Text("Lorem ipsum")
            Text("Lorem ipsum")
            Text("Lorem ipsum")
        }
    }
}

struct Approach2_Previews: PreviewProvider {
    static var previews: some View {
        Approach2()
    }
}

这似乎是做我想做的事情的正确方法。它真的很接近我想要得到的：

不幸的是，当我点击展开单元格上方的单元格时，有一个奇怪的故障我无法修复：

你能帮助我吗？谢谢。

Answer 1

这是一个尝试的解决方案。正如问题中所述，它比方法 1 和方法 2 效果更好。但在高度之间的过渡过程中存在轻微的“摆动”，到目前为止我还无法消除。也许可以进一步完善这种方法以消除该故障。

这里的方法借鉴了：

• SwiftUI - 在列表中的视图内触发的动画也不会为列表设置动画
• SwiftUI - 获取孩子的大小？

Cell首先，我们使用名为 的辅助视图测量展开单元格和收缩单元格的高度ChildHeightReader。然后，我们使用 收集的信息创建一个AnimatableModifier“称为AnimatingCellHeight”，以在单元格膨胀和收缩时对高度变化进行动画处理ChildHeightReader。AnimatingCellHeight包括一个clipping调用，以便当框架扩展和收缩时，框架外部的内容会被剪裁。它还将框架的对齐方式设置为.top，以便在接触时我们看到内容的开头而不是（默认）中间。

    struct ExpandingList: View {

      @State private var selectedIndex = -1

      var body: some View {
            List {
                  ForEach(0...20, id: \.self) { idx in
                        Cell(isExpanded: self.selectedIndex == idx)
                              .onTapGesture {
                                    withAnimation {
                                          self.selectedIndex = (self.selectedIndex == idx) ? -1 : idx
                                    }
                        }
                  }
            }
      }
}

private struct Cell : View {
      let isExpanded: Bool

      @State var expandedHeight : CGFloat = .zero
      @State var defaultHeight : CGFloat = .zero

      var body: some View {

            return ChildHeightReader(size: $expandedHeight) {
                  VStack(alignment: .leading) {

                        ChildHeightReader(size: self.$defaultHeight) {
                              Text("Hello World")
                        }

                        Text("Lorem ipsum")
                        Text("Lorem ipsum")
                        Text("Lorem ipsum")
                        Text("Lorem ipsum")
                        Text("Lorem ipsum")
                        Text("Lorem ipsum")
                  }
            }.modifier(AnimatingCellHeight(height: isExpanded ? expandedHeight : defaultHeight) )
      }
}

struct AnimatingCellHeight: AnimatableModifier {
      var height: CGFloat = 0

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

      func body(content: Content) -> some View {
            return content.frame(height: height, alignment: .top).clipped()
      }
}

struct HeightPreferenceKey: PreferenceKey {
      typealias Value = CGFloat
      static var defaultValue: Value = .zero

      static func reduce(value _: inout Value, nextValue: () -> Value) {
            _ = nextValue()
      }
}

struct ChildHeightReader<Content: View>: View {
      @Binding var size: CGFloat
      let content: () -> Content
      var body: some View {
            ZStack {
                  content()
                        .background(
                              GeometryReader { proxy in
                                    Color.clear
                                          .preference(key: HeightPreferenceKey.self, value: proxy.size.height)
                              }
                  )
            }
            .onPreferenceChange(HeightPreferenceKey.self) { preferences in
                  self.size = preferences
            }
      }
}

struct ExpandingList_Previews: PreviewProvider {
      static var previews: some View {
            VStack() {
                  ExpandingList()
            }
      }
}