钟文志的架构师之路

Appearance

使用状态指示视图中的数据依赖关系，并使用绑定与其他视图共享这些依赖关系。

SwiftUI 应用的用户界面由构成视图层次结构的视图组成。每个视图都依赖于某些数据。当这些数据发生变化时（无论是由于外部事件还是用户的操作），SwiftUI 都会自动更新视图以反映这些变化。

此示例展示了使用 State 变量指示数据依赖关系以及使用 Binding 属性包装器与其他视图共享数据的示例。

要试验代码，请下载项目文件并在 Xcode 中打开示例。

第 1 部分 ​

将属性和命令代码与视图分离 当视图需要管理多个状态数据时，将这些数据管理在一个单独的视图特定结构中会很有帮助。这种方法通过将属性和命令式代码移到视图之外，有助于提高视图声明式接口代码的可读性。此外，它还有助于更轻松地实现状态更改的单元测试。

此示例应用展示了一系列烹饪食谱。用户可以查看食谱详情并添加新食谱。为了添加食谱，该示例会显示自定义视图 Recipe Editor ，该视图需要三项状态数据：食谱、指示是否保存更改的标志以及指示是否显示 Recipe Editor 视图的标志。

示例应用程序通过定义结构 Recipe Recipe Editor Config 将其状态数据和命令式代码与 Recipe Recipe Editor 分开。

步骤 1 ​

结构 Recipe Editor Config 存储了 Recipe Editor 视图所需的状态数据。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }

为了触发在 Recipe Editor 视图中发生的状态变化， Recipe Editor Config 提供了变异函数来更新数据以反映新状态。

第 2 步 ​

方法 presentAddRecipe(sidebarItem:) 会更改视图的状态以指示其正在编辑新配方。

笔记 当有人点击“添加食谱”按钮时，应用程序会调用此方法。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

步骤3 ​

此方法创建一个空配方作为要编辑的配方。

静态方法 empty Recipe() 创建 Recipe 的新实例，并将其属性设置为新配方的默认值。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

步骤4 ​

除了 empty Recipes() 设置的默认值之外， presentAddRecipe(sidebarItem:) 还根据所选的侧边栏项目设置食谱的 is Favorite 和 collections 属性。

通过设置 is Favorite 和 collections 属性，保存菜谱后，新菜谱会自动出现在相应的菜谱列表中。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

步骤5 ​

presentAddRecipe(sidebarItem:) should Save Changes 标志设置为 false ，因为使用该应用程序的人尚未表明他们想要保存更改。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

步骤6 ​

此方法将 is Presented 标志设置为 true 以告诉 SwiftUI 显示编辑器视图。

笔记 继续阅读以了解配方编辑器如何根据 is Presented 值显示。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

步骤7 ​

present Edit Recipe(_😃 与 presentAddRecipe(sidebarItem:) 类似，但用于编辑现有配方。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

步骤8 ​

与 presentAddRecipe(sidebarItem:) 那样创建空配方不同， present Edit Recipe(_😃 接收要编辑的配方作为参数，并将 recipe 设置为传入的配方。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

Recipe Editor Config 支持另外两种变异方法，它们在编辑器中触发状态变化，同时将命令式代码与声明式接口代码分离： done() 和 cancel() 。

步骤9 ​

done() 方法表示编辑器应该保存对配方所做的更改，并关闭 Recipe Editor 视图。

该方法将 should Save Changes 设置为 true ，以指示应用程序应保存对菜谱所做的更改。它还将 is Presented 为 false ，以指示 SwiftUI 关闭编辑器视图。

import Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }

步骤10 ​

cancel() 方法与 done() 类似，但它将 should Save Changes 设置为 false ，告诉应用程序忽略对配方所做的更改。

该方法还将 is Presented 为 false ，以告诉 SwiftUI 关闭编辑器视图。

mport Foundation


struct RecipeEditorConfig {
    var recipe = Recipe.emptyRecipe()
    var shouldSaveChanges = false
    var isPresented = false
    
    mutating func presentAddRecipe(sidebarItem: SidebarItem) {
        recipe = Recipe.emptyRecipe()


        switch sidebarItem {
        case .favorites:
            // Associate the recipe to the favorites collection.
            recipe.isFavorite = true
        case .collection(let name):
            // Associate the recipe to a custom collection.
            recipe.collections = [name]
        default:
            // Nothing else to do.
            break
        }
            
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func presentEditRecipe(_ recipeToEdit: Recipe) {
        recipe = recipeToEdit
        shouldSaveChanges = false
        isPresented = true
    }
    
    mutating func done() {
        shouldSaveChanges = true
        isPresented = false
    }
    
    mutating func cancel() {
        shouldSaveChanges = false
        isPresented = false
    }
}

第 2 节 ​

将视图绑定到其状态数据 有了包含配方编辑器所需数据的结构以及改变编辑器状态的方法，请查看 Recipe Editor 视图以了解它如何使用 Recipe Editor Config 。

步骤 1 ​

Recipe Editor 是一个符合 View 协议的结构。

import SwiftUI


struct RecipeEditor: View {
    @Binding var config: RecipeEditorConfig
    
    var body: some View {
        NavigationStack {
            RecipeEditorForm(config: $config)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text(editorTitle)
                    }
                    
                    ToolbarItem(placement: cancelButtonPlacement) {
                        Button {
                            config.cancel()
                        } label: {
                            Text("Cancel")
                        }
                    }
                    
                    ToolbarItem(placement: saveButtonPlacement) {
                        Button {
                            config.done()
                        } label: {
                            Text("Save")
                        }
                    }
                }
            #if os(macOS)
                .padding()
            #endif
        }
    }
    
    private var editorTitle: String {
        config.recipe.isNew ? "Add Recipe" : "Edit Recipe"
    }
    
    private var cancelButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .cancellationAction
        #else
        .navigationBarLeading
        #endif
    }
    
    private var saveButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .confirmationAction
        #else
        .navigationBarTrailing
        #endif
    }
}

第 2 步 ​

该结构声明了 Recipe Editor Config 类型的绑定变量 config ，其中包含视图用来确定其外观的状态数据。

重要的 Binding 属性包装器提供与视图所需数据的双向读写绑定。但是， Recipe Editor 并不拥有这些数据。相反，另一个视图创建并拥有 Recipe Editor Config 的实例，该实例由 Recipe Editor 绑定并使用。

import SwiftUI


struct RecipeEditor: View {
    @Binding var config: RecipeEditorConfig
    
    var body: some View {
        NavigationStack {
            RecipeEditorForm(config: $config)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text(editorTitle)
                    }
                    
                    ToolbarItem(placement: cancelButtonPlacement) {
                        Button {
                            config.cancel()
                        } label: {
                            Text("Cancel")
                        }
                    }
                    
                    ToolbarItem(placement: saveButtonPlacement) {
                        Button {
                            config.done()
                        } label: {
                            Text("Save")
                        }
                    }
                }
            #if os(macOS)
                .padding()
            #endif
        }
    }
    
    private var editorTitle: String {
        config.recipe.isNew ? "Add Recipe" : "Edit Recipe"
    }
    
    private var cancelButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .cancellationAction
        #else
        .navigationBarLeading
        #endif
    }
    
    private var saveButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .confirmationAction
        #else
        .navigationBarTrailing
        #endif
    }
}

步骤3 ​

Recipe Editor 包含 Recipe Editor Form ，其中显示编辑配方数据所需的输入字段。

重要的 Recipe Editor 将绑定变量 config 传递给 Recipe Editor Form 。它将变量作为绑定传递，通过在变量名 config 前添加 $ 符号前缀来表示。由于 Recipe Editor Form 将 config 作为绑定接收，因此该表单可以读取和写入数据 config 。

import SwiftUI


struct RecipeEditor: View {
    @Binding var config: RecipeEditorConfig
    
    var body: some View {
        NavigationStack {
            RecipeEditorForm(config: $config)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text(editorTitle)
                    }
                    
                    ToolbarItem(placement: cancelButtonPlacement) {
                        Button {
                            config.cancel()
                        } label: {
                            Text("Cancel")
                        }
                    }
                    
                    ToolbarItem(placement: saveButtonPlacement) {
                        Button {
                            config.done()
                        } label: {
                            Text("Save")
                        }
                    }
                }
            #if os(macOS)
                .padding()
            #endif
        }
    }
    
    private var editorTitle: String {
        config.recipe.isNew ? "Add Recipe" : "Edit Recipe"
    }
    
    private var cancelButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .cancellationAction
        #else
        .navigationBarLeading
        #endif
    }
    
    private var saveButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .confirmationAction
        #else
        .navigationBarTrailing
        #endif
    }
}

步骤4 ​

编辑器在其工具栏中显示一个取消按钮。

当用户点击“取消”按钮时，其操作将调用在 Recipe Editor Config 中定义的变异方法 cancel() ，该方法 should Save Changes 设置为 false 并将 is Presented 为 false 。

import SwiftUI


struct RecipeEditor: View {
    @Binding var config: RecipeEditorConfig
    
    var body: some View {
        NavigationStack {
            RecipeEditorForm(config: $config)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text(editorTitle)
                    }
                    
                    ToolbarItem(placement: cancelButtonPlacement) {
                        Button {
                            config.cancel()
                        } label: {
                            Text("Cancel")
                        }
                    }
                    
                    ToolbarItem(placement: saveButtonPlacement) {
                        Button {
                            config.done()
                        } label: {
                            Text("Save")
                        }
                    }
                }
            #if os(macOS)
                .padding()
            #endif
        }
    }
    
    private var editorTitle: String {
        config.recipe.isNew ? "Add Recipe" : "Edit Recipe"
    }
    
    private var cancelButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .cancellationAction
        #else
        .navigationBarLeading
        #endif
    }
    
    private var saveButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .confirmationAction
        #else
        .navigationBarTrailing
        #endif
    }
}

步骤5 ​

编辑器还显示一个“保存”按钮，当用户点击该按钮时，会调用 mutating done() 方法，该方法 should Save Changes 设置为 true 并将 is Presented 为 false ，告诉应用程序保存对菜谱所做的任何更改并关闭编辑器视图。

重要的 在 cancel() 和 done() 方法中，设置 should Save Changes 并 is Presented ，这使得视图代码更易于阅读，因为每个按钮的操作只需一行代码。按钮操作可以显式设置 config .save Config 和 config .is Presented ，但将操作中的命令式代码保持在最低限度有助于使视图的声明式界面代码更具可读性，也更易于维护。

import SwiftUI


struct RecipeEditor: View {
    @Binding var config: RecipeEditorConfig
    
    var body: some View {
        NavigationStack {
            RecipeEditorForm(config: $config)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        Text(editorTitle)
                    }
                    
                    ToolbarItem(placement: cancelButtonPlacement) {
                        Button {
                            config.cancel()
                        } label: {
                            Text("Cancel")
                        }
                    }
                    
                    ToolbarItem(placement: saveButtonPlacement) {
                        Button {
                            config.done()
                        } label: {
                            Text("Save")
                        }
                    }
                }
            #if os(macOS)
                .padding()
            #endif
        }
    }
    
    private var editorTitle: String {
        config.recipe.isNew ? "Add Recipe" : "Edit Recipe"
    }
    
    private var cancelButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .cancellationAction
        #else
        .navigationBarLeading
        #endif
    }
    
    private var saveButtonPlacement: ToolbarItemPlacement {
        #if os(macOS)
        .confirmationAction
        #else
        .navigationBarTrailing
        #endif
    }
}

第 3 节 ​

在另一个视图中创建状态变量 Recipe Editor 视图与 Recipe Editor Config 的实例绑定。编辑器可以读取和写入数据，但它并不拥有配方数据。相反， Content List View 视图创建并拥有数据，并且 SwiftUI 在内容列表视图的整个生命周期内管理该数据。

步骤 1 ​

Content List View 是一个符合 View 协议并显示食谱列表的自定义视图。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}

当人们想要添加菜谱时， Content List View 还负责显示菜谱编辑器，这使得该视图成为创建 Recipe Editor Config 实例的理想场所。

第 2 步 ​

该视图定义了私有状态变量 recipe Editor Config ，类型为 Recipe Editor Config 。

重要的 recipe Editor Config 声明包含 State 属性包装器的属性，该属性告知 SwiftUI 创建和管理 Recipe Editor Config 的实例。每次视图状态发生变化（即 recipe Editor Config 包含的数据发生变化）时，SwiftUI 都会重新初始化视图，将 Recipe Editor Config 实例重新连接到视图，并重建计算的 body 属性中定义的视图，该视图反映了数据的当前状态。有关更多信息，请参阅模型数据 。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}

步骤3 ​

此视图还在其工具栏中显示 “添加配方” 按钮。

添加配方按钮显示为一个带有加号作为标签的按钮。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}

步骤4 ​

当用户点击 “添加菜谱” 按钮时，该按钮的操作会调用变异方法 presentAddRecipe(sidebarItem:) ，从而更改 recipe Editor Config 中包含的数据。

回想一下， presentAddRecipe(sidebarItem:) 会创建一个空食谱，并根据所选的侧边栏项目设置其 is Favorite 和 collections 属性值。该方法还将 should Save Changes 设置为 false ，并将“呈现” is Presented 为 true 。将这些命令式代码保留在视图之外，有助于使视图的声明式代码更易于理解和维护。

笔记 当 presentAddRecipe(sidebarItem:) 更改 recipe Editor Config 中的数据时，SwiftUI 会重新初始化 Content List View 实例，并将 recipe Editor Config 重新连接到它所管理的实例。然后，SwiftUI 会根据其计算出的 body 属性重建视图，以便该视图反映数据的当前状态。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}

步骤5 ​

调用 presentAddRecipe(sidebarItem:) 后， is Presented 为 true ，这告诉 SwiftUI 显示包含食谱编辑器的工作表。

布尔值 recipeEditorConfig.isPresented 决定是否显示包含 Recipe Editor 视图的工作表。当该值从 false 更改为 true 时，工作表将显示包含 Recipe Editor 模态视图。当该值从 true 更改为 false 时，工作表将关闭模态视图。

笔记 修饰符 sheet(isPresented:onDismiss:content:) 接收一个由美元符号 ( $ ) 前缀指示的绑定。此绑定允许工作表读取和写入属性。例如，当用户通过向下滑动关闭工作表时，工作表会将 recipeEditorConfig.isPresented 设置为 false 。此更改会导致 SwiftUI 重新初始化并重建视图。由于 is Presented 现在为 false ，因此工作表将不再显示。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}

步骤6 ​

该表包含 Recipe Editor ，这是一个自定义视图，显示一个包含输入字段的表单，允许用户更改配方的数据。

Recipe Editor 接收与 recipe Editor Config 的绑定（如美元符号 $ 前缀所示），这使得编辑器可以检索并更改 recipe Editor Config 中包含的数据。这包括更改配方数据和触发状态更改。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}

步骤7 ​

当 is Presented 的值从 true 变为 false 时，工作表将调用其 on Dismiss 操作，该操作将调用 did Dismiss Editor 方法。

笔记 当 Recipe Editor Config 定义的 cancel() 和 done() 方法中 is Presented 从 true 变为 false 时，工作表还会调用 on Dismiss 。由于工作表与 recipeEditorConfig.isPresented 属性存在绑定，因此它能够检测到值的变化。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}

步骤8 ​

此视图实现了 did Dismiss Editor 方法，如果 recipeEditorConfig.shouldSaveChanges 为 true ，则该方法保存用户对菜谱所做的更改；否则，该方法将忽略这些更改。

笔记 Recipe Editor Config 仅关注 Recipe Editor 及其视图，因此 Content List View 实现了 did Dismiss Editor 方法，而不是 Recipe Editor Config 。这种方法可以将关注的领域分开。

import SwiftUI


struct ContentListView: View {
    @Binding var selection: Recipe.ID?
    let selectedSidebarItem: SidebarItem
    @EnvironmentObject private var recipeBox: RecipeBox
    @State private var recipeEditorConfig = RecipeEditorConfig()


    var body: some View {
        RecipeListView(selection: $selection, selectedSidebarItem: selectedSidebarItem)
            .navigationTitle(selectedSidebarItem.title)
            .toolbar {
                ToolbarItem {
                    Button {
                        recipeEditorConfig.presentAddRecipe(sidebarItem: selectedSidebarItem)
                    } label: {
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $recipeEditorConfig.isPresented,
                           onDismiss: didDismissEditor) {
                        RecipeEditor(config: $recipeEditorConfig)
                    }
                }
            }
    }
    
    private func didDismissEditor() {
        if recipeEditorConfig.shouldSaveChanges {
            if recipeEditorConfig.recipe.isNew {
                selection = recipeBox.add(recipeEditorConfig.recipe)
            } else {
                recipeBox.update(recipeEditorConfig.recipe)
            }
        }
    }
}