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, как указано в вопросе. Но при переходе между высотами наблюдается небольшое «колебание», которое я пока не смог устранить. Может быть, этот подход может быть усовершенствован, чтобы устранить этот сбой.

Подход здесь dr aws on:

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