Swift占位符ContentUnavailableView

ContentUnavailableView 是 SwiftUI 提供的一个视图，用于显示占位内容或空状态（Empty State）的界面。当某些内容不可用、加载失败或者数据为空时，使用它可以方便地提示用户当前状态。

基本用法

1、显示简单提示

import SwiftUI

struct ContentView: View {
    var body: some View {
        ContentUnavailableView("No Internet Connection", systemImage: "wifi.slash")
    }
}

systemImage 参数接受 SF Symbols 图标。

这里会显示一个标题 “No Internet Connection” 和图标 wifi.slash。

2、添加描述内容

可以添加description字段，用于添加一行额外的描述文字。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ContentUnavailableView("No snippets", systemImage: "swift", description: Text("You don't have any saved snippets yet."))
    }
}

description可以添加额外的样式，例如自定义字体或自定义颜色。

3、自定义视图

可以完全控制ContentUnavailableView视图，为标题、描述提供单独的视图。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ContentUnavailableView {
            Label("No snippets", systemImage: "swift")
        } description: {
            Text("You don't have any saved snippets yet.")
        } actions: {
            Button("Create Snippet") {
                // create a snippet
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

Label表示占位符内容，description用于底部描述，action添加执行代码。

参考文章

Showing empty states with ContentUnavailableView：https://www.hackingwithswift.com/books/ios-swiftui/showing-empty-states-with-contentunavailableview