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 查看 ↗