SwiftUI how to refactor list item into a subview - swiftui

Question

I have been trying to create smaller reusable view for a simple SwiftUI project. However, I'm getting unexpected results and struggling to understand why.
Here is my contrived example to highlight the issue
Using this example, how should you create a reusable RowView to take place of the HStack in a list
var body: some View {
List(vm.gradings) { item in
// how should you refactor out this ??
HStack {
Text(item.grade)
Text(item.pass ? "Pass" : "Fail")
}
}
}
I'm using Firebase to trigger a model change. i.e changing a grade to pass or fail and expecting the list detail view to display that change.
The above method works as expected, while on the list view and the row will change when the data is changed.
However, when I try and refactor that view out, only one works as expected. Ideally, I'd like to pass in the Grading object, but that doesn't cause the view to refresh.
Trying different subviews and their results
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")
// }
}
}
Here are the 3 row options
// 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")
}
}
}
Work Around
// 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")
}
}
}
My view model
class StudentGradingsUIViewModel: ObservableObject {
#Published var detailedstudent: DetailedStudent
var gradings: [Grading] {
detailedstudent.student.gradings
}
init(student: DetailedStudent) {
self.detailedstudent = student
}
}

Answer 1

If you use a #state, I found all what you are doing is right at least in these View portion.
/ 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")
// }
}}
}
}
So I think the problematic part, i.e. #publisher var. part.

Answer 2

This works - wondering I think its a decent approach
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)
}
}