tToastKit / 文件

SWIFTUI · 開源元件

恰到好處的
輕提示。

為 SwiftUI 應用程式加入輕巧、堆疊式的 Toast 通知。手勢、計時與樣式都已準備就緒。

開始使用 ↓iOS 17+ · Swift 5.10
01

快速接入

快速開始

透過 Swift Package Manager 加入 ToastKit,接著將 ToastCenter 附加到需要顯示通知的檢視畫面。

ContentView.swiftSWIFT
import SwiftUI
import ToastKit

struct ContentView: View {
    @State private var toasts = ToastCenter()

    var body: some View {
        Button("儲存") {
            toasts.present(.normal, title: "更改已儲存")
        }
        .toasts(toasts)
    }
}
✳

就這麼簡單。提示會顯示在安全區域底部,停留四秒。預設的滑動操作可刪除提示,也可暫存至下次開啟頁面時再顯示。

在 Xcode 中選擇 File → Add Package Dependencies,輸入 https://github.com/DavidRicardoWilde/swiftui-toastkit。

02

提示內容

Toast 訊息

ToastMessage 儲存提示文案、語意狀態、顯示時間,以及可選的點擊與滑動操作。簡單情境可使用便利方法;需要更多控制時,直接建立訊息物件。

toasts.present(.warning,
    title: "儲存空間不足",
    message: "請釋出空間以繼續同步。"
)

let message = ToastMessage(
    status: .notification,
    title: "新照片",
    message: "今天新增 12 張照片",
    icon: .system("photo.on.rectangle"),
    duration: 6
)
toasts.present(message)
NORMAL

一般

適合日常確認,視覺表達安靜而克制。

WARNING

需要留意

提醒使用者注意尚未失敗的問題。

ERROR

操作失敗

使用清楚、容易辨識的錯誤訊號。

NOTIFICATION

值得查看

通知狀態採用應用程式的強調色。

再次提交相同 id 的訊息會更新該提示並將它移到最前面,很適合呈現「正在同步…」接著變成「同步完成」這類進度狀態。

03

留一點時間

顯示時間

.automatic 使用中心的預設時間,預設為四秒。也可以直接指定秒數;需要使用者明確處理的訊息則可設為 .indefinite。

// 顯示兩秒
ToastMessage(title: "已複製", duration: 2)

// 直到使用者主動關閉
ToastMessage(title: "同步失敗", duration: .indefinite)

let toasts = ToastCenter(defaultDuration: 6)
  • 只有最前面的提示會倒數。
  • 被遮住的提示會保留完整時間,等它移到最前面才開始計時。
  • 使用者觸碰提示堆疊或應用程式進入背景時,倒數會暫停。
04

明確的下一步

手勢與操作

使用者可以點擊、向任一方向滑動,或按住提示後先查看兩側操作再做決定。VoiceOver 也會依名稱提供相同操作。

手勢預設行為自訂方式
點擊沒有操作,點擊會穿透至後方內容tapAction 或 onTap
向 leading 側滑動刪除提示swipeActions.leading
向 trailing 側滑動下次開啟時再次顯示swipeActions.trailing
按住預覽兩側滑動操作重用相同的滑動操作
let archive = ToastAction(
    id: "archive",
    title: "封存",
    icon: .system("archivebox"),
    confirmation: "已封存"
) { toast in
    store.archive(toast.id)
}

toasts.present(ToastMessage(
    title: "來自 Ana 的訊息",
    tapAction: ToastAction(title: "開啟") { toast in
        router.open(toast.id)
    },
    swipeActions: ToastSwipeActions(leading: archive, trailing: .later)
))

操作依序執行:先執行自身 handler,再通知堆疊的 onToastAction 觀察器,最後套用操作效果。內建 .later 會暫存提示,等頁面再次出現時恢復。

05

依需求自訂

樣式與主題

預設的 .glass 樣式使用磨砂卡片,並依狀態調整顏色。可以透過 ToastTheme 修改設計令牌、選擇無裝飾的 .plain,或實作 ToastStyle 建立自己的卡片。

MyScreen()
    .toasts(toasts)
    .toastTheme(ToastTheme(
        titleFont: .headline,
        tint: { status in
            status == .notification ? .pink : ToastTheme.standardTint(status)
        },
        cornerRadius: 16
    ))

// 從沒有背景與固定顏色的樣式開始
MyScreen().toasts(toasts).toastStyle(.plain)
動效 色彩 表面 字體

自訂樣式可以存取提示的圖示、標題、內文、狀態,以及卡片是否正處於長按軌道上。版面與手勢仍由堆疊負責。

06

恰當的位置

位置與寬度

預設情況下,卡片從底部向上堆疊,寬度為可用安全區域的 60%。

// 頂部位置
MyScreen().toasts(toasts, placement: .top)

// 安全區域的 90%,或指定固定寬度
MyScreen().toasts(toasts, width: .fraction(0.9))
MyScreen().toasts(toasts, width: .points(320))

在 TabView 中,將 .toasts(toasts) 附加到標籤頁內容上。系統標籤列與底部配件已計入安全區域。若有自訂浮動列,可標記為 .toastObstruction(),堆疊便會避開它。

✓已儲存底部 · 60%
安全區域
07

為每個人打造

輔助使用

ToastKit 不要求特定手勢也能使用操作,並遵循 SwiftUI 環境中的輔助使用設定。

  • VoiceOver 會朗讀每則提示,並在操作轉子中提供兩側滑動操作。
  • 減少動態效果時,滑入動畫會改為淡入淡出。
  • 減少透明度時,磨砂表面會改為不透明。
  • 增加對比時,玻璃邊緣會顯示為實線框線。
  • 動態字體會同步縮放文字與狀態圖示。
08

使用者的語言

應用程式本地化

ToastKit 內建操作標籤支援英文、日文、簡體中文與繁體中文。應用程式自己的文案由你管理:請為標題、內文及自訂操作標籤加入本地化。

// 將應用程式文案放在 String Catalog 或 Localizable.strings。
toasts.present(.warning,
    title: String(localized: "storage.low.title"),
    message: String(localized: "storage.low.message")
)

ToastKit 會依照宿主應用程式的語言環境顯示內建標籤。自訂 ToastAction 標題與確認文案是一般字串,可使用應用程式現有的本地化工具處理。

繼續探索

讓介面再精緻一點

查看原始碼,了解完整 API 的實際用法。

在 GitHub 查看 ↗