MudBlazor 中实现带进度条的 Snackbar 通知组件

在现代化 Web 应用开发中，通知组件是不可或缺的 UI 元素。MudBlazor 作为流行的 Blazor UI 组件库，提供了强大的 Snackbar 通知组件。本文将探讨如何在 MudBlazor 中扩展 Snackbar 功能，使其支持显示进度指示器。

需求背景

传统的 Snackbar 主要用于显示简单的文本通知，但在某些场景下，我们需要展示更复杂的内容。例如：

• 文件上传/下载进度
• 长时间运行任务的进度
• 不确定等待时间的操作状态

这些场景需要 Snackbar 能够显示进度条或旋转指示器，并支持动态更新进度值。

技术实现方案

核心思路

MudBlazor 的 Snackbar 组件支持自定义渲染内容，这为我们提供了扩展的基础。我们可以通过以下方式实现带进度条的 Snackbar：

1. 创建自定义组件，包含进度指示器和消息文本
2. 提供扩展方法简化创建过程
3. 实现进度更新机制

实现细节

自定义组件

创建一个 Razor 组件，同时支持线性进度条和圆形旋转指示器：

@if (UseSpinner)
{
    <div class="d-flex justify-center flex-grow-1 gap-2" style="width: 100%">
        <MudProgressCircular Color="@Color" Size="Size.Small" 
            Indeterminate="!Progress.HasValue" Value="Progress ?? 0" />
        <MudText>@Message</MudText>
    </div>
}
else
{
    <div style="width: 100%">
        <p>@Message</p>
        <MudProgressLinear Color="@Color" Max="100" Style="width: 100%" 
            Indeterminate="!Progress.HasValue" Value="Progress ?? 0" />
    </div>
}

扩展方法

为 ISnackbar 接口添加扩展方法，简化带进度条 Snackbar 的创建：

public static IProgressSnackbar? AddLinearProgressSnackbar(this ISnackbar snackbar, 
    string message, double? progress, Color progressBarColor, 
    Severity severity = Severity.Normal, Action<SnackbarOptions> configure = null)
{
    // 实现代码
}

进度更新接口

定义接口支持动态更新进度和消息：

public interface IProgressSnackbar : IDisposable, IProgress<double>
{
    Snackbar? Snackbar { get; }
    Task UpdateAsync(string message, double? progress);
    string Message { get; }
    double? Progress { get; }
}

使用示例

创建进度 Snackbar

var progressSnackbar = Snackbar.AddLinearProgressSnackbar(
    "文件上传中...", 
    null,  // 初始为不确定进度
    Color.Info,
    options => {
        options.VisibleStateDuration = int.MaxValue;
    });

更新进度

// 更新为确定进度
await progressSnackbar.UpdateAsync("文件上传中...", 50);

// 实现 IProgress<double> 接口
progressSnackbar.Report(75);

完成时关闭

await progressSnackbar.UpdateAsync("上传完成", 100);
await Task.Delay(1000);
progressSnackbar.Dispose();

设计考量

1. 灵活性：同时支持线性和圆形进度指示器
2. 易用性：通过扩展方法提供简洁的 API
3. 兼容性：实现标准 IProgress 接口，与 .NET 生态良好集成
4. 可扩展性：组件设计允许轻松添加其他类型的指示器

最佳实践建议

1. 对于短时间操作（<3秒），使用不确定进度指示器
2. 对于长时间操作，提供确定的进度百分比
3. 在操作完成后，保持 Snackbar 短暂显示完整状态后再关闭
4. 提供取消或跳过操作的按钮（通过 Snackbar 的 Action 配置）

总结

通过扩展 MudBlazor 的 Snackbar 组件，我们可以实现功能丰富的进度通知。这种实现方式既保持了与 MudBlazor 原有 API 的一致性，又提供了专业级的进度反馈功能。开发者可以根据实际需求，进一步定制样式和行为，打造更符合项目需求的用户通知体验。