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 不会对单元格展开进行动画处理，它只会对出现/消失的底部内容进行动画处理，结果非常奇怪（我放慢了动画速度以便让您看到）：

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

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]

Answer 3

另一种选择是删除

List

并使用

ScrollView

与

ForEach

结合使用：

struct ContentView: View {
var body: some View {
    ScrollView {
        ForEach(0...20, id: \.self) { idx in
            SomeCellView()
        }
    }
}

现在，当使用动画处理

SomeCellView

内的内容扩展时，它可以正常工作：

struct ExpandableCellView: View {
  @State private var isExpanded = false

  var body: some View {
    VStack {
      Text("Non expanded content")

      if isExpanded {
        Text("expanded content")
      }
    }
    .onTapGesture {
      withAnimation(.easeIn(duration: 0.2)) {
        isExpanded.toggle()
      }
    }
  }
}

这种方法的一个潜在缺点可能是

ScrollView

的性能比

List

更差，尤其是对于非常大的数据集。