ios - 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 - Animations triggered inside a View that's in a list doesn't animate the list as well
• SwiftUI - Get size of child?

首先，我们使用名为 ChildHeightReader 的辅助 View 测量 Cell 中展开单元格和收缩单元格的高度。然后，我们创建一个 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()
            }
      }
}