Ios 快捷方式：扩展/收缩列表单元格

我正在开发一个可以扩展/收缩的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()
    }
}

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

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

---

你能帮我吗？谢谢。

这里是一个尝试过的解决方案。它比问题中概述的方法1和方法2更有效。但是在两个高度之间的转换过程中有一个轻微的“摆动”，我到目前为止还不能消除。也许可以进一步改进此方法以消除该故障

这里的方法借鉴了：

首先，我们使用名为

ChildHeightReader

的辅助视图在

cell

中测量扩展单元格和收缩单元格的高度。然后，我们创建一个名为

AnimatingCellHeight

的

AnimatableModifier

，以使用

ChildHeightReader

收集的信息，在单元格展开和收缩时设置高度变化的动画

AnimatingCellHeight

包括一个

clipping

调用，以便随着帧的扩展和收缩，对帧外的内容进行剪裁。它还将框架的对齐方式设置为

.top

，这样当我们接触时，可以看到内容的开头，而不是（默认）中间

struct ExpandingList:视图{
@状态私有变量selectedIndex=-1
var body：一些观点{
名单{
ForEach（0…20，id:\.self）{idx-in
单元格（isExpanded:self.selectedIndex==idx）
.ontapsigne{
动画片{
self.selectedIndex=（self.selectedIndex==idx）？-1:idx
}
}
}
}
}
}
私有结构单元：视图{
让我扩展一下：布尔
@状态变量expandedHeight:CGFloat=.0
@状态变量defaultHeight:CGFloat=.0
var body：一些观点{
返回ChildHeightReader（大小：$expandedHeight）{
VStack（对齐：。前导）{
ChildHeightReader（大小：self.$defaultHeight）{
文本（“你好，世界”）
}
文本（“Lorem ipsum”）
文本（“Lorem ipsum”）
文本（“Lorem ipsum”）
文本（“Lorem ipsum”）
文本（“Lorem ipsum”）
文本（“Lorem ipsum”）
}
}.修改器（动画单元格高度（高度：isExpanded？expandedHeight:defaultHeight））
}
}
结构AnimatingCellHeight:AnimatableModifier{
变量高度：CGFloat=0
var animatableData:CGFloat{
获取{height}
设置{height=newValue}
}
func正文（内容：内容）->某些视图{
返回content.frame（高度：高度，对齐方式：.top）.clipped（）
}
}
结构高度首选项键：首选项键{
typealias值=CGFloat
静态变量defaultValue:值=.0
静态函数reduce（值quot:inout值，nextValue:（）->值）{
_=下一个值（）
}
}
结构ChildHeightReader:视图{
@绑定变量大小：CGFloat
让内容：（）->内容
var body：一些观点{
ZStack{
内容（）
.背景(
GeometryReader{中的代理
颜色。清晰
.preference（键：HeightPreferenceKey.self，值：proxy.size.height）
}
)
}
.onPreferenceChange（HeightPreferenceKey.self）{中的首选项
self.size=首选项
}
}
}
结构扩展列表\u预览：PreviewProvider{
静态var预览：一些视图{
VStack（）{
扩展列表（）
}
}
}

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