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

這是一個嘗試的解決方案。 如問題中所述，它比 Approach1 和 Approach2 效果更好。 但是在高度之間的過渡過程中會出現輕微的“搖擺”，這是我迄今為止無法消除的。 也許這種方法可以進一步完善以消除該故障。

這里的方法借鑒了：

• SwiftUI - 在列表中的視圖內觸發的動畫也不會為列表設置動畫
• SwiftUI - 獲取孩子的大小？

首先，我們使用名為ChildHeightReader的輔助視圖測量Cell中擴展單元格和收縮單元格的高度。 然后我們創建一個AnimatableModifier - 稱為AnimatingCellHeight - 使用ChildHeightReader收集的信息為單元格擴展和收縮時的高度變化設置動畫。 AnimatingCellHeight包含一個clipping調用，以便在框架擴展和收縮時裁剪框架外的內容。 並且它還將框架的.top設置為 .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]