SwiftUI如何将列表项重构为子视图

Question

我一直在尝试为一个简单的SwiftUI项目创建更小的可重用视图。然而，我得到了意想不到的结果，并且很难理解为什么。

以下是我为强调问题而设计的示例

使用此示例，您应该如何创建可重用的RowView来代替列表中的HStack

var body: some View {
List(vm.gradings) { item in
// how should you refactor out this ??
HStack {
Text(item.grade)
Text(item.pass ? "Pass" : "Fail")
}
}
}

我正在使用Firebase来触发模型更改。即将等级更改为通过或不通过，并期望列表详细视图显示该更改。

上面的方法按预期工作，而在列表视图中，当数据更改时，行将发生更改。

然而，当我尝试重构那个视图时，只有一个能像预期的那样工作。理想情况下，我希望传入Grading对象，但这不会导致视图刷新。

尝试不同的子视图及其结果

var body: some View {
List(vm.gradings) { item in
// Works
RowA(grade: item.grade, pass: item.pass)
// Fails
// RowB(item: item)
// Fails
// RowC(item: item)
// Default - works as expected
// HStack {
//  Text(item.grade)
//  Text(item.pass ? "Pass" : "Fail")
// }
}
}

以下是的3行选项

// Works
struct RowA: View {
var grade: String
var pass: Bool
var body: some View {
HStack {
Text(grade)
Text(pass ? "Pass" : "Fail")
}
}
}
// Fails
struct RowB: View {
var item: Grading
var body: some View {
HStack {
Text(item.grade)
Text(item.pass ? "Pass" : "Fail")
}
}
}
// Fails
struct RowC: View {
@State var item: Grading
var body: some View {
HStack {
Text(item.grade)
Text(item.pass ? "Pass" : "Fail")
}
}
}

解决方案

// Allows me to pass in just the model
struct RowD: View {
private var item = Grading()
private var grade: String = ""
private var pass: Bool = false
init(item: Grading) {
self.item = item
self.grade = item.grade
self.pass = item.pass
}
var body: some View {
HStack {
Text(grade)
Text(pass ? "Pass" : "Fail")
}
}
}

我的视图模型

class StudentGradingsUIViewModel: ObservableObject {
@Published var detailedstudent: DetailedStudent
var gradings: [Grading] {
detailedstudent.student.gradings
}
init(student: DetailedStudent) {
self.detailedstudent = student
}
}

Answer 1

如果您使用@state，我发现您所做的一切都是正确的，至少在这些View部分是正确的。

/ Works
struct RowA: View {
var grade: String
var pass: Bool
var body: some View {
HStack {
Text(grade)
Text(pass ? "Pass" : "Fail")
}
}
}
//// Fails
struct RowB: View {
var item: Grading
var body: some View {
HStack {
Text(item.grade)
Text(item.pass ? "Pass" : "Fail")
}
}
}
//
//// Fails
struct RowC: View {
@State var item: Grading
var body: some View {
HStack {
Text(item.grade)
Text(item.pass ? "Pass" : "Fail")
}
}
}
struct  Grading: Identifiable{
var id = UUID()
var grade : String
var pass  : Bool
}
struct TempGradingView: View {
@State var gradings: [Grading] = [Grading.init(grade: "50", pass: false),Grading.init(grade: "100", pass: true),Grading.init(grade: "100", pass: true)]

var body: some View {
Group{
Button("change", action: {
self.gradings[0].grade = "70"
})
List(gradings) { item in
// Works
// RowA(grade: item.grade, pass: item.pass)
// Fails
RowB(item: item)
// Fails
// RowC(item: item)
// Default - works as expected
// HStack {
//  Text(item.grade)
//  Text(item.pass ? "Pass" : "Fail")
// }
}}
}
}

所以我认为有问题的部分，即@publisher var-part。

Answer 2

这很有效-想知道我认为这是一个不错的方法

private func gradingRow(_ grading: Grading) -> some View {
HStack {
Text(grading.grade)
.foregroundColor(grading.pass ? Color(UIColor.systemGreen) : Color(UIColor.systemRed))
Spacer()
Text(DateString.dateAsDDMMYYTime(from: grading.date))
.font(.subheadline)
}
}