更改数据源时的 SwiftUI 列表动画

Question

我的 SwiftUI 应用程序中有一个列表，顶部按钮用于查看要加载到列表中的上一个/下一个项目类别。当您按下按钮时，List 的来源会发生变化，并且 List 会更新其默认动画(行会折叠起来)。

简化可复制版本的代码(请参见下面的屏幕截图):

import SwiftUI

struct ContentView: View {
  private let models = [
    ["a", "b", "c", "d", "e", "f"],
    ["g", "h"],
    ["i", "j", "k", "l"],
  ]

  @State private var selectedCategory = 1

  private var viewingModels: [String] {
    models[selectedCategory]
  }

  var body: some View {
    VStack(spacing: 0.0) {
      HStack {
        Button(action: previous) {
          Text("<")
        }

        Text("\(selectedCategory)")

        Button(action: next) {
          Text(">")
        }
      }

      List(viewingModels, id: \.self) { model in
        Text(model)
      }
    }
  }

  private func previous() {
    if selectedCategory > 0 {
      selectedCategory -= 1
    }
  }

  private func next() {
    if selectedCategory < (models.count - 1) {
      selectedCategory += 1
    }
  }
}

现在，我不想在这里使用默认的列表动画。我希望列表项水平滑动。所以当你按下 >箭头查看下一类别的项目，屏幕上的现有项目应移至左侧，新项目应从右侧进入。当你按下 < 时相反按钮。基本上，它应该感觉像是一个包含多个页面的 Collection View ，您可以在其中滚动。

我已经发现包装 previous 的内容和 next功能 withAnimation将默认列表动画更改为其他内容。然后我尝试添加 .transition(.slide)到列表(及其中的文本)以更改新动画，但这没有效果。不确定如何更改列表的动画，尤其是 2 个不同按钮的不同方向/方向。

使用带有每个类别列表的 ScrollView 不会在实际应用程序中扩展，即使是的，这可能是这个只有很少行的简单示例的解决方案:)

Answer 1

如果您的按钮按照您的建议进行换行并且我添加了一个简单的方向 bool 值:

Button(action: {
            withAnimation {
                slideRight = true
                self.previous()
            }
        }) {
          Text("<")
        }

与另一个方向相反:

Button(action: {
            withAnimation {
                slideRight = false
                self.next()
            }
        }) {
          Text(">")
        }

然后你可以像这样转换你的 View :

List(viewingModels, id: \.self) { model in
            Text(model)
        }
        .id(UUID())
        .transition(.asymmetric(insertion: .move(edge: slideRight ? .leading : .trailing),
                                removal: .move(edge: slideRight ? .trailing : .leading)))

请注意，为了使列表不具有动画效果，我们需要每次都给列表一个新的唯一 ID，请参阅这篇文章:https://swiftui-lab.com/swiftui-id/

更新:

我想提供有效的完整缩短代码，还根据下面的评论删除了 UUID() 用法。

import SwiftUI

struct ContentView: View {
    private let models = [
        ["a", "b", "c", "d", "e", "f"],
        ["g", "h"],
        ["i", "j", "k", "l"],
    ]

    @State private var selectedCategory = 0
    @State private var slideRight = true

    private var viewingModels: [String] {
        models[selectedCategory]
    }

    var body: some View {
        VStack(spacing: 0.0) {
            HStack {
                Button(action: {
                    withAnimation {
                        if(self.selectedCategory - 1 < 0) { self.selectedCategory = self.models.count - 1 }
                            else {  self.selectedCategory -= 1 }
                        self.slideRight = true
                    }
                }) {
                    Image(systemName: "arrow.left")
                }

                Text("\(selectedCategory + 1)")

                Button(action: {
                    withAnimation {

                        if(self.selectedCategory + 1 > self.models.count - 1) { self.selectedCategory = 0 }
                            else { self.selectedCategory += 1 }
                        self.slideRight = false
                    }
                }) {
                    Image(systemName: "arrow.right")
                }
            }.font(.title)

            List(viewingModels, id: \.self) { model in
                Text(model)
            }
            .id(selectedCategory)
            .transition(.asymmetric(insertion: .move(edge: slideRight ? .leading : .trailing),
                                    removal: .move(edge: slideRight ? .trailing : .leading)))
        }.padding(10)
    }
}