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