Blazor中实现Toast通知需创建状态模型、ToastService和Toast组件。1. 状态模型含Id、Message、Type等字段；2. ToastService注册为Scoped服务，管理增删通知及定时关闭；3. Toast组件用@foreach渲染并绑定CSS动画；4. 在Program.cs注册服务，MainLayout中引入组件，任意组件注入调用Show方法。
Blazor 中实现 Toast 通知，核心是用一个可复用的组件管理状态、动画和生命周期，配合服务注入实现跨组件调用。不依赖 JS Interop 也能做，但加一点 CSS 动画会让体验更自然。
1. 创建 Toast 状态模型
定义通知的基本结构，包括内容、类型（success/warning/error）、持续时间、是否自动关闭等：
Id：唯一标识，用于单个关闭或清理 Message：显示文本（支持 MarkupString 可选） Type：枚举（Info / Success / Warning / Error）控制样式 AutoDismiss：true 表示定时自动消失 DurationMs：默认 3000ms，可覆盖
2. 实现 ToastService（状态管理服务）
注册为 Scoped 服务，负责添加、移除、批量清除通知：
内部用 List 存储当前所有 Toast 提供 Show() 方法，生成 Id、设置超时 Timer 并触发 StateHasChanged Dismiss(id) 和 ClearAll() 方法用于手动控制 注意：Timer 回调中要检查组件是否已销毁，避免内存泄漏
3. 编写 Toast 组件（Toast.razor）
这是一个无逻辑的 UI 层，只负责渲染列表并绑定动画类：
用 @foreach 遍历 ToastService.Items，按顺序从上到下排列 每个 toast 添加 CSS 类如 toast toast–success fade-in，配合 opacity + transform 实现淡入滑入 用 @key=”item.Id” 确保 Blazor 正确复用 DOM 元素 右上角 × 按钮调用 service.Dismiss(item.Id)
4. 注册与使用
在 Program.cs 中注册服务：builder.Services.AddScoped();
在 MainLayout.razor 或 App.razor 底部引入组件：
任意组件中注入并调用：
@inject ToastService Toast
@code {
private void OnSave() {
Toast.Show("保存成功！", ToastType.Success);
}
}
基本上就这些。不需要第三方库，轻量可控，样式和行为都容易按项目需求调整。
以上就是Blazor Toast 通知组件的实现方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1442900.html
微信扫一扫 
支付宝扫一扫 
