Bookworm - 一款阅读与评价图书的App

2024-01-24 21:37:50

SwiftUI 100 天挑战：Bookworm - 第 1 部分：使用 Binding 创建自定义组件

在 SwiftUI 100 天挑战的第一部分，我们将使用 SwiftUI 创建一个名为 Bookworm 的应用程序。Bookworm 将允许用户跟踪他们读过的书，以及对每本书的评分和评论。

我们将使用 SwiftUI 的 Binding 功能来创建自定义组件，以便用户可以轻松地与应用程序交互。例如，我们将创建一个自定义的书籍列表视图，允许用户滚动浏览他们读过的所有书籍。我们还将创建一个自定义的书籍详细视图，允许用户查看有关特定书籍的更多信息，例如标题、作者、评分和评论。

在第一部分中，我们将重点介绍如何使用 SwiftUI 的 Binding 功能来创建自定义组件。我们还将学习如何使用 Core Data 来管理应用程序的数据。

先决条件

在开始之前，您需要确保您已经满足以下先决条件：

Xcode 13 或更高版本
Swift 5.5 或更高版本
SwiftUI 2.0 或更高版本
Core Data 2.0 或更高版本

入门

打开 Xcode 并创建一个新的 SwiftUI 项目。
将项目命名为 "Bookworm"。
选择 "SwiftUI App" 模板。
单击 "Create" 按钮。

创建数据模型

接下来，我们需要创建一个数据模型来存储应用程序的数据。我们将使用 Core Data 来管理数据。

在 Xcode 中，单击 "File" 菜单，然后单击 "New" > "File..."。
选择 "Core Data Model" 模板。
将文件命名为 "Bookworm.xcdatamodeld"。
单击 "Create" 按钮。

创建实体

在数据模型中，我们将创建一个名为 "Book" 的实体。实体是一个数据类型的模板，它定义了实体可以包含的属性。

在数据模型编辑器中，单击 "Add Entity" 按钮。
将实体命名为 "Book"。
单击 "Add Attribute" 按钮。
将属性命名为 "title"，类型为 "String"。
单击 "Add Attribute" 按钮。
将属性命名为 "author"，类型为 "String"。
单击 "Add Attribute" 按钮。
将属性命名为 "genre"，类型为 "String"。
单击 "Add Attribute" 按钮。
将属性命名为 "rating"，类型为 "Int16"。
单击 "Add Attribute" 按钮。
将属性命名为 "review"，类型为 "String"。

创建管理对象上下文

管理对象上下文是 Core Data 的一个对象，它用于管理应用程序的数据。

在 ContentView.swift 文件中，添加以下代码：

import CoreData

class CoreDataStack: ObservableObject {

    static let shared = CoreDataStack()
    
    lazy var persistentContainer: NSPersistentContainer = {

        let container = NSPersistentContainer(name: "Bookworm")
        container.loadPersistentStores(completionHandler: { (storeDescription, error) in
            if let error = error {

                fatalError("Fatal error loading persistent stores: \(error.localizedDescription)")
            }
        })
        return container
    }()
    
    var context: NSManagedObjectContext {
        
        persistentContainer.viewContext
    }
}

创建自定义组件

接下来，我们将创建一个自定义的书籍列表视图。书籍列表视图将允许用户滚动浏览他们读过的所有书籍。

在 ContentView.swift 文件中，添加以下代码：

struct BookListView: View {

    @Environment(\.managedObjectContext) private var context
    
    @FetchRequest(sortDescriptors: [
        NSSortDescriptor(keyPath: \Book.title, ascending: true)
    ]) private var books: FetchedResults<Book>

    var body: some View {

        NavigationView {

            List {

                ForEach(books) { book in

                    NavigationLink(destination: BookDetailView(book: book)) {

                        Text(book.title ?? "Unknown")
                    }
                }
                .onDelete(perform: deleteBooks)
            }
            .toolbar {

                ToolbarItem(placement: .navigationBarTrailing) {

                    Button(action: addBook) {

                        Label("Add Book", systemImage: "plus")
                    }
                }
            }
            .navigationBarTitle("Bookworm")
        }
    }
    
    private func addBook() {

        let newBook = Book(context: context)
        newBook.title = "Unknown"
        newBook.author = "Unknown"
        newBook.genre = "Unknown"
        newBook.rating = 0
        newBook.review = "Unknown"

        try? context.save()
    }

    private func deleteBooks(offsets: IndexSet) {

        offsets.map { books[$0] }.forEach(context.delete)

        try? context.save()
    }
}

创建自定义详细视图

接下来，我们将创建一个自定义的书籍详细视图。书籍详细视图将允许用户查看有关特定书籍的更多信息，例如标题、作者、评分和评论。

在 ContentView.swift 文件中，添加以下代码：

struct BookDetailView: View {

    @Environment(\.managedObjectContext) private var context
    var book: Book

    var body: some View {

        Form {

            Section("Title") {

                Text(book.title ?? "Unknown")
            }

            Section("Author") {

                Text(book.author ?? "Unknown")
            }

            Section("Genre") {

                Text(book.genre ?? "Unknown")
            }

            Section("Rating") {

                Picker("Rating", selection: $book.rating) {

                    ForEach(0...5, id: \.self) { rating in

                        Text("\(rating)")
                    }
                }
            }

            Section("Review") {

                TextEditor(text: $book.review)
            }
        }
        .toolbar {

            ToolbarItem(placement: .navigationBarTrailing) {

                Button("Save") {

                    try? context.save()
                }
            }
        }
        .navigationBarTitle("Book Details")
    }
}