在 SwiftUI 中实战应用 ContentUnavailableView

前言

SwiftUI 引入了新的 ContentUnavailableView 类型，允许咱们在运用程序中展示空状况、过错状况或任何其他内容不可用的状况。本周，咱们将学习如何运用 ContentUnavailableView 引导用户阅读运用程序中的空状况。

根本用法

让咱们从展示 ContentUnavailableView 视图的根本用法开始。

struct ContentView: View {
    let store: Store
    var body: some View {
        NavigationStack {
            List(store.products, id: .self) { product in
                Text(verbatim: product)
            }
            .navigationTitle("Products")
            .overlay {
                if store.products.isEmpty {
                    ContentUnavailableView(
                        "Connection issue",
                        systemImage: "circle"
                    )
                }
            }
        }
    }
}

在上面的示例中，咱们将 ContentUnavailableView 界说为产品列表的叠加层。每当产品列表为空时，咱们运用带有标题和图画的 ContentUnavailableView 显现。ContentUnavailableView 的另一种变体还允许咱们界说当时状况的描绘文本。

自界说视图

struct ContentView: View {
    let store: Store
    var body: some View {
        NavigationStack {
            List(store.products, id: .self) { product in
                Text(verbatim: product)
            }
            .navigationTitle("Products")
            .overlay {
                if store.products.isEmpty {
                    ContentUnavailableView {
                        Label("Connection issue", systemImage: "wifi.slash")
                    } description: {
                        Text("Check your internet connection")
                    } actions: {
                        Button("Refresh") {
                            store.fetch()
                        }
                    }
                }
            }
        }
    }
}

ContentUnavailableView 还允许咱们在描绘文本下方显现操作按钮。因此，ContentUnavailableView 初始化程序的另一种变体允许咱们运用 ViewBuilder 闭包界说视图的每个部分，从而完全自界说其外观和感觉。

查找屏幕运用

struct ContentView: View {
    @Bindable var store: Store
    var body: some View {
        NavigationStack {
            List(store.products, id: .self) { product in
                Text(verbatim: product)
            }
            .navigationTitle("Products")
            .overlay {
                if store.products.isEmpty {
                    ContentUnavailableView.search
                }
            }
            .searchable(text: $store.query)
        }
    }
}

在查找屏幕显现查找成果时，可以运用 ContentUnavailableView 类型的查找功用。它由框架本地化，并遍历视图层次结构以找到查找栏并提取其文本以显现在视图内。

手动提供查询

struct ContentView: View {
    @Bindable var store: Store
    var body: some View {
        NavigationStack {
            List(store.products, id: .self) { product in
                Text(verbatim: product)
            }
            .navigationTitle("Products")
            .overlay {
                if store.products.isEmpty {
                    ContentUnavailableView.search(text: store.query)
                }
            }
            .searchable(text: $store.query)
        }
    }
}

你还可以经过运用 ContentUnavailableView 类型的查找功用并提供单个参数来手动将查询输入描绘中。

可运转 Demo

完整可以运转的 Demo 需要有相关的环境和依赖项，而代码片段中触及到了一些 Store 和其他可能的模型或服务。由于代码片段中的 Store 类型未提供，我将运用一个简化版本的示例代码来创立一个简单的 SwiftUI Demo，以展示 ContentUnavailableView 的根本运用。

import SwiftUI
struct Product: Identifiable {
    let id: UUID
    let name: String
}
class ProductStore: ObservableObject {
    @Published var products: [Product] = []
    func fetchProducts() {
        // Simulating product fetching
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.products = [Product(id: UUID(), name: "iPhone"), Product(id: UUID(), name: "iPad")]
        }
    }
}
struct ContentView: View {
    @StateObject var store = ProductStore()
    var body: some View {
        NavigationView {
            List(store.products) { product in
                Text(product.name)
            }
            .navigationTitle("Products")
            .overlay {
                if store.products.isEmpty {
                    ContentUnavailableView(
                        "No Products",
                        systemImage: "exclamationmark.triangle"
                    )
                }
            }
            .onAppear {
                store.fetchProducts()
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

上述代码中，咱们创立了一个简单的 Product 结构体表明产品，以及一个 ProductStore 类作为存储产品的模仿服务。在 ContentView 中，咱们运用 ContentUnavailableView 来处理产品为空的情况。

请确保在 Xcode 中创立一个新的 SwiftUI 项目，并将上述代码替换到主 ContentView 中，然后运转该项目。在项目的初始加载时，ContentUnavailableView 将显现“No Products”消息，几秒后模仿产品加载，之后产品列表将显现在主视图中。

总结

今日，咱们学习了如安在 SwiftUI 中运用 ContentUnavailableView 类型以用户友好的方法显现空状况。经过这些简单而强大的功用，咱们可以更好地引导用户，使他们可以理解运用程序的当时状况。 ContentUnavailableView 的灵活性和易用性为咱们处理运用程序中的不可用状况提供了有力的工具。