如何让 SwiftUI 动态响应用户事件？

Question

I'm an experienced iOS developer, but new to SwiftUI. I'm trying to create a dynamic interface backed by a data model. The following illustrates what I'm trying to do:

The model object:

class Book : Hashable {
    static func == (lhs: Book, rhs: Book) -> Bool {
        return lhs.title == rhs.title && lhs.author == rhs.author && lhs.favorite == rhs.favorite
    }

    var title : String
    var author : String
    var favorite : Bool = false

    init(title : String, author: String) {
        self.title = title
        self.author = author
    }

    func hash(into hasher: inout Hasher) {
        hasher.combine(title)
        hasher.combine(author)
        hasher.combine(favorite)
    }
}

The content view:

struct ContentView: View {
    @State private var library = [
        Book(title: "Lord of The Rings", author: "J.R.R. Tolkien"),
        Book(title: "Harry Potter", author: "J.K. Rowling"),
        Book(title: "Under the Dome", author: "Steven King")
    ]

    var body: some View {
        NavigationView {
            MasterView(books: $library)
                .navigationBarTitle(Text("Library"))
        }.navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

struct MasterView: View {
    @Binding var books: [Book]

    var body: some View {
        List {
            ForEach(books, id: \.self) { book in
                HStack {
                    Button(action: {}, label: {
                        (book.favorite ?
                            Image(systemName: "heart.fill") :
                            Image(systemName: "heart"))
                        .imageScale(.large)
                    }).onTapGesture {
                        book.favorite.toggle()
                    }
                    Text("\(book.title) by \(book.author)")
                }
            }
        }
    }
}

Here's what the result looks like:

The appearance is correct. However, I want the like buttons to work: I want the tap to update the favorite variable in the model object, and then the buttons themselves should change appropriately.

The first happens, the second doesn't.

What am I doing wrong, and how would I get the dynamic UI updates I want?

Answer 1

Another solution would be to conform to ObservableObject protocol, and use @Published property observer so any views that are watching our class notice that the property changed and reload. Like this.

class Book : Hashable, ObservableObject {
static func == (lhs: Book, rhs: Book) -> Bool {
    return lhs.title == rhs.title && lhs.author == rhs.author && lhs.favorite == rhs.favorite
}

var title : String
var author : String
@Published var favorite : Bool = false

init(title : String, author: String) {
    self.title = title
    self.author = author
}

func hash(into hasher: inout Hasher) {
    hasher.combine(title)
    hasher.combine(author)
    hasher.combine(favorite)
}}

Than create a separate View for each row

struct Row: View {

@ObservedObject var onebook: Book

var body: some View {
    HStack {
        Button(action: {}, label: {
            (onebook.favorite ?
                Image(systemName: "heart.fill") :
                Image(systemName: "heart"))
                .imageScale(.large)
        }).onTapGesture {
            self.onebook.favorite.toggle()
        }
        Text("\(onebook.title) by \(onebook.author)")
    }
}}



struct MasterView: View {

@Binding var books: [Book]

var body: some View {
    List {
        ForEach(books, id: \.self) { book in
            Row(onebook: book)
        }
    }
}

Answer 2

The main issue of this approach is that

@State private var library = ...

is an array of references, which are not changed when you change object in MasterView , so state of library is not changed, so ContentView is not refreshed.

Here are minimum required changes to make this approach work

1) make model duplicatable, by changing initialiser (changes in class Book )

var title : String
var author : String
var favorite : Bool

init(title : String, author: String, favorite : Bool = false) {
    self.title = title
    self.author = author
    self.favorite = favorite
}

2) force changing of book result in changed library (changes in struct MasterView )

ForEach(books, id: \.self) { book in
    HStack {
        Button(action: {
            // Main idea: modification of book, must modify the library
            // which is bound to state of parent view, which result in refresh
            self.books = self.books.map { $0 != book ? $0 :
              Book(title: book.title, author: book.author, favorite: !book.favorite)}
        }) {
            (book.favorite ?
                Image(systemName: "heart.fill") :
                Image(systemName: "heart"))
            .imageScale(.large)
        }
        Text("\(book.title) by \(book.author)")
    }
}

This works. Tested on Xcode 11.2 / iOS 13.2. (If needed full code from my test env, don't hesitate to notify me).