[SwiftUI 100天] Bookworm-part6 用 @FetchRequest 构建列表为了让这个界面更生动

译自 www.hackingwithswift.com/books/ios-s…
更多内容，欢迎关注公众号「Swift花园」
喜欢文章？不如来个 🔺💛➕三连？关注专栏，关注我 🚀🚀🚀

用 @FetchRequest 构建列表

目前，我们的ContentView里有一个 fetch 请求属性：

@FetchRequest(entity: Book.entity(), sortDescriptors: []) var books: FetchedResults<Book>

我们在body里的一个简单的文本视图用到它：

Text("Count: \(books.count)")

为了让这个界面更生动，我们需要把文本视图替换成一个显示所有图书的列表，加上它们的评级和作者信息。

我们可以用上刚刚创建的星级评价控件，不过尝试一点新玩意也不错。尽管RatingView控件已经适用于任何工程，我们可以再创建一个新的EmojiRatingView，专门为这个项目显示评价信息。它实现的功能是，根据不同的评价显示五种不同的 emoji 表情，这个例子对于展示 SwiftUI 里的视图如何组合非常棒 —— 以这种方式，从你的视图中拉取一部分是如何简单。

创建一个叫 “EmojiRatingView” 的新 SwiftUI 视图，代码如下：

struct EmojiRatingView: View {
    let rating: Int16

    var body: some View {
        switch rating {
        case 1:
            return Text("1️⃣")
        case 2:
            return Text("2️⃣")
        case 3:
            return Text("3️⃣")
        case 4:
            return Text("4️⃣")
        default:
            return Text("1️⃣")
        }
    }
}

struct EmojiRatingView_Previews: PreviewProvider {
    static var previews: some View {
        EmojiRatingView(rating: 3)
    }
}

注意，对于等级我使用了Int16，这是为了和 Core Data 的交互更容易。整个代码非常简单。

现在，回到ContentView，把原来的文本视图替换成一个列表，使用ForEach遍历books来创建。对于ForEach的identifier参数，我们传入\.self，也就是整个对象作为 identifier。

你瞧，Core Data 实体里的所有属性都是 optional 的，因此我们需要大量地使用空合操作符。稍后我们会寻找替代方案，眼下我们先将就使用这些??符号。

在列表内部，我们将使用一个NavigationLink，它会导向一个细节视图。而NavigationLink内部，我们会用上新的EmojiRatingView，加上书名和作者。把文本视图替换成下面的代码：

List {
    ForEach(books, id: \.self) { book in
        NavigationLink(destination: Text(book.title ?? "Unknown Title")) {
            EmojiRatingView(rating: book.rating)
                .font(.largeTitle)

            VStack(alignment: .leading) {
                Text(book.title ?? "Unknown Title")
                    .font(.headline)
                Text(book.author ?? "Unknown Author")
                    .foregroundColor(.secondary)
            }
        }
    }
}

我们稍后还会回到这里，现在让我们构建细节视图...

我的公众号这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～