在 SwiftUI 中分组列表数据以分段显示答案

【问题标题】：Group list data in SwiftUI for display in sections在 SwiftUI 中分组列表数据以分段显示
【发布时间】：2020-06-04 08:03:35
【问题描述】：

我正在尝试获取一组项目（结构）并使用 SwiftUI 在分组表视图中显示它们。

我的（简化的）模型如下所示：

struct CheckIn: Identifiable {
  ...
  let id = UUID()
  let date = Date().atMidnight // removes the time component
  var completed: Bool
  ...
}

class Store: ObservableObject {
  @Published var checkIns = [...] {
    didSet { persist() }
  }
}

在列表中显示签到之前，我想按日期对它们进行分组。所以我有另一个模型：

struct DailyCheckIns {
  let date: Date
  let checkIns: [CheckIn]
}

// and a function to group the check-ins array:
func groupByDate(_ checkIns: [CheckIn]) -> [DailyCheckIns] {...}

视图是我遇到问题的地方。下面的版本有效，但数据没有明显分组。 “工作”是指数据被传递到CheckInView，它可以更新其签入，然后正确反映在商店和 UI 中。

struct ContentView: View {
  @EnvironmentObject var store: Store

  var body: some View {
    NavigationView {
      List {
        ForEach(store.checkIns.indices) { idx in
          CheckInView(checkIn: self.$store.checkIns[idx]) // checkIn is a @Binding
        }
      }
      .navigationBarTitle("Check Ins")
    }
  }
}

下一个版本是我对数据进行分组的尝试。使用这种方法，我必须将CheckInView 的checkIn 属性从@Binding 更改为@State。分组工作并显示数据，但是当签入完成被切换时，模型会更新，但 UI 不会。

struct ContentView: View {
  @EnvironmentObject var store: Store

  var body: some View {
    NavigationView {
      List {
        ForEach(groupByDate(store.checkIns), id: \.date) { daily in
          Section(header: Text(dateFormatter.string(from: daily.date))) {
            ForEach(daily.checkIns, id: \.id) { checkIn in
              CheckInView(checkIn: checkIn) // I can't use a binding here, so in this version I need to make checkIn a @State.
            }
          }
        }
      }
      .navigationBarTitle("Check Ins")
    }
  }
}

目前我没有CheckInView直接修改签到。相反，它将更新发布到商店，商店更新模型：

struct CheckInView: View {
  @Binding var checkIn: CheckIn
  @EnvironmentObject var store: Store

  var body: some View {
    HStack {
      Button(action: {
        self.store.update(checkIn: self.checkIn, with: true)

      }) {
        Image(systemName: "...")
          .font(.largeTitle)
          .foregroundColor(checkIn.completed ? .gray : .red)
      }
      .buttonStyle(BorderlessButtonStyle())
...

所以问题是：如何保持列表分组并保持绑定在视图层次结构中一直有效？

【问题讨论】：

您是否尝试将修饰符 .listStyle(GroupedListStyle()) 添加到您的列表中？
抱歉，我在深夜打字，弄乱了我的术语。我不是指表格视图的样式，只是数据应该按日期分组。

标签： ios swift swiftui swiftui-list

【解决方案1】：

我已经想出了如何做到这一点。我不知道这是否是最优雅的解决方案。它在我看来确实不优雅，但我想不出另一种方法来做到这一点。

在我发布的代码中，DailyCheckIns 是用于对签到进行分组的中间模型。函数groupByDate 接受CheckIns 的数组并将它们转换为DailyCheckIns 进行显示。问题是DailyCheckIn 本质上保存了存储中数据的副本，所以我不能真正使用它来创建从该数据到存储的绑定。

我发现的方法是使用DailyCheckIns 来创建部分和每个部分中的行数，但是在创建需要绑定到商店的视图时，我直接使用商店的数据.为此，我必须更改 DailyCheckIns（和 groupByDate）以跟踪商店属性中每个 CheckIn 的索引：

typealias CheckInWithIndex = (Int, CheckIn)

struct DailyCheckIns {
  let date: Date
  var checkIns: [CheckInWithIndex]

  func appending(_ ci: CheckInWithIndex) -> DailyCheckIns {
    DailyCheckIns(date: date, checkIns: checkIns + [ci])
  }
}

private func groupByDate(_ checkIns: [CheckIn]) -> [DailyCheckIn] { ... }

struct ContentView: View {
  @EnvironmentObject var store: Store

  var body: some View {
    NavigationView {
      List {
        ForEach(groupByDate(store.checkIns), id: \.date) { daily in
          Section(header: Text(dateFormatter.string(from: daily.date))) {
            ForEach(daily.checkIns, id: \.id) { checkInWithIndex in
              CheckInView(checkIn: self.$store.checkIns[checkInWithIndex.0])
            }
          }
        }
      }
      .navigationBarTitle("Check Ins")
    }
  }
}

希望这对某人有所帮助。而且，我希望有人对这种情况有更好的解决方案。

【讨论】：