案例概述

SnackBar 是 Flutter 中用于显示临时通知的组件。与 AlertDialog 不同，SnackBar 会在屏幕底部显示，并在一段时间后自动消失。它常用于显示操作反馈、错误消息、成功提示等。本案例展示了如何使用 SnackBar 创建各种高级通知。

核心概念

1. SnackBar 基础

SnackBar 是一个轻量级的通知组件，通过 ScaffoldMessenger.showSnackBar() 显示。

2. 操作按钮

SnackBar 可以包含一个操作按钮，用于撤销操作或执行相关操作。

3. 自定义样式

可以自定义 SnackBar 的外观，包括颜色、形状、边距等。

代码详解

示例 1：成功提示

class SuccessSnackBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: const Text('操作成功'),
            backgroundColor: Colors.green,
            duration: const Duration(seconds: 2),
          ),
        );
      },
      child: const Text('显示成功提示'),
    );
  }
}

代码解释： 这个示例展示了成功提示。通过 backgroundColor 设置绿色背景，duration 控制显示时长。

示例 2：错误提示

class ErrorSnackBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: const Text('操作失败'),
            backgroundColor: Colors.red,
            duration: const Duration(seconds: 2),
          ),
        );
      },
      child: const Text('显示错误提示'),
    );
  }
}

代码解释： 这个示例展示了错误提示。通过红色背景区分错误消息。

示例 3：警告提示

class WarningSnackBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: const Text('请注意'),
            backgroundColor: Colors.orange,
            duration: const Duration(seconds: 2),
          ),
        );
      },
      child: const Text('显示警告提示'),
    );
  }
}

代码解释： 这个示例展示了警告提示。通过橙色背景区分警告消息。

示例 4：带操作的提示

class ActionSnackBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: const Text('已删除'),
            action: SnackBarAction(
              label: '撤销',
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('已撤销')),
                );
              },
            ),
          ),
        );
      },
      child: const Text('显示带操作的提示'),
    );
  }
}

代码解释： 这个示例展示了带操作按钮的 SnackBar。用户可以点击"撤销"按钮执行相关操作。

示例 5：自定义样式提示

class CustomStyleSnackBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: const Text('自定义提示'),
            backgroundColor: Colors.purple,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            margin: const EdgeInsets.all(16),
            behavior: SnackBarBehavior.floating,
          ),
        );
      },
      child: const Text('显示自定义样式提示'),
    );
  }
}

代码解释： 这个示例展示了自定义样式的 SnackBar。通过 shape 添加圆角，margin 控制边距，behavior 设置为 floating 使其浮动显示。

高级话题

1. 动态/响应式设计

根据屏幕大小调整 SnackBar。

2. 动画与过渡

自定义 SnackBar 出现动画。

3. 搜索/过滤/排序

在搜索结果中显示提示。

4. 选择与批量操作

在批量操作时显示提示。

5. 加载与缓存

显示加载状态提示。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义 SnackBar 样式。

9. 数据持久化/导出

保存 SnackBar 状态。

10. 单元测试与集成测试

测试 SnackBar 功能。

PC 端适配要点

• 根据屏幕大小调整 SnackBar 大小
• 提供清晰的操作按钮
• 支持键盘快捷键关闭

实际应用场景

• 操作反馈：显示操作结果
• 错误提示：显示错误信息
• 成功提示：显示成功消息
• 撤销操作：提供撤销选项

扩展建议

• 学习高级通知库
• 研究性能优化
• 探索自定义动画
• 集成分析库

总结

SnackBar 是显示临时通知的轻量级方式。通过灵活使用 SnackBar，可以创建友好的用户反馈。理解 SnackBar 的生命周期和自定义选项是关键。