在 SwiftUI 中實戰(zhàn)應用 ContentUnavailableView
前言
SwiftUI 引入了新的 ContentUnavailableView 類型，允許我們在應用程序中展示空狀態(tài)、錯誤狀態(tài)或任何其他內(nèi)容不可用的狀態(tài)。本周，我們將學習如何使用 ContentUnavailableView 引導用戶瀏覽應用程序中的空狀態(tài)。
基本用法
讓我們從展示 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 定義為產(chǎn)品列表的疊加層。每當產(chǎn)品列表為空時，我們使用帶有標題和圖像的 ContentUnavailableView 顯示。ContentUnavailableView 的另一種變體還允許我們定義當前狀態(tài)的描述文本。
自定義視圖
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)
}
}
}
圖片
在搜索屏幕顯示搜索結(jié)果時，可以使用 ContentUnavailableView 類型的搜索功能。它由框架本地化，并遍歷視圖層次結(jié)構(gòu)以找到搜索欄并提取其文本以顯示在視圖內(nèi)。
手動提供查詢
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 類型的搜索功能并提供單個參數(shù)來手動將查詢輸入描述中。
可運行 Demo
完整可以運行的 Demo 需要有相關(guān)的環(huán)境和依賴項，而代碼片段中涉及到了一些 Store 和其他可能的模型或服務。由于代碼片段中的 Store 類型未提供，我將使用一個簡化版本的示例代碼來創(chuàng)建一個簡單的 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()
}
}上述代碼中，我們創(chuàng)建了一個簡單的 Product 結(jié)構(gòu)體表示產(chǎn)品，以及一個 ProductStore 類作為存儲產(chǎn)品的模擬服務。在 ContentView 中，我們使用 ContentUnavailableView 來處理產(chǎn)品為空的情況。
請確保在 Xcode 中創(chuàng)建一個新的 SwiftUI 項目，并將上述代碼替換到主 ContentView 中，然后運行該項目。在項目的初始加載時，ContentUnavailableView 將顯示“No Products”消息，幾秒后模擬產(chǎn)品加載，之后產(chǎn)品列表將顯示在主視圖中。
總結(jié)
今天，我們學習了如何在 SwiftUI 中使用 ContentUnavailableView 類型以用戶友好的方式顯示空狀態(tài)。通過這些簡單而強大的功能，我們能夠更好地引導用戶，使他們能夠理解應用程序的當前狀態(tài)。ContentUnavailableView 的靈活性和易用性為我們處理應用程序中的不可用狀態(tài)提供了有力的工具。
