SwiftUI：扩展/收缩列表单元格

Question

我正在开发一个可以展开/收缩的 SwiftUI List 单元格，这是在许多情况下都很简单的功能。类似于以下示例（以下示例是使用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不会对单元格扩展进行动画处理，它只会对出现/消失的底部内容进行动画处理，结果非常奇怪（我放慢了动画速度，让你看到）：

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

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

这似乎是我想要做的正确方式。 它非常接近我想要得到的东西：

很不幸，当我点击一个已展开的单元格上方的单元格时，出现了一个奇怪的故障，我无法修复。

你能帮我吗？谢谢。

- superpuccio

Answer 1

这里是一种尝试性的解决方案，它比问题中提到的 Approach1 和 Approach2 更有效。但在高度转换期间存在轻微的“抖动”，我目前还无法消除。也许可以进一步改进此方法以消除该故障。

这种方法借鉴了以下内容：

• SwiftUI - Animations triggered inside a View that's in a list doesn't animate the list as well
• SwiftUI - Get size of child?

首先，我们使用名为 ChildHeightReader 的帮助器视图来测量 Cell 中扩展单元格和收缩单元格的高度。然后，我们创建一个可动画修改器 - 名为 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()
            }
      }
}

- Obliquely

Answer 2

也许考虑使用 DisclosureGroup。

struct ContentView: View {
var body: some View {
    List(0...20, id: \.self) { idx in
        DisclosureGroup { 
            Text("Lorem Ipsum")
            Text("Lorem Ipsum")
            Text("Lorem Ipsum")
            Text("Lorem Ipsum")
        } label: { 
            Text("Hello World")
        }
        
    }
}

这会自动包含动画效果。结果如下所示： [结果][1]

- Meyssam