案例概述

本案例展示如何使用 SnackBar 显示提示和通知。SnackBar 是 Flutter 中用于显示短暂提示信息的组件，通常显示在屏幕底部，可以自动消失或通过用户操作关闭。

在现代应用中，SnackBar 广泛应用于：

• 操作反馈：确认用户操作已完成
• 错误提示：显示错误信息和解决方案
• 成功通知：显示操作成功的消息
• 撤销操作：提供撤销最后操作的选项

SnackBar 的优势在于它提供了非侵入式的提示方式，不会中断用户的操作流程。在企业应用中，需要处理多种提示类型、不同屏幕尺寸的适配、性能优化等问题。

此外，提示还应支持键盘导航、无障碍支持、性能优化等功能。在 PC 端应用中，需要支持鼠标交互和键盘快捷键。

核心概念

1. SnackBar（提示框）

SnackBar 是一个提示框组件，用于显示短暂的提示信息。其主要特点包括：

• content 参数：提示框的内容
• duration 参数：提示框显示时长
• action 参数：提示框的操作按钮
• backgroundColor 参数：背景颜色
• behavior 参数：提示框的显示位置

2. 显示方式与管理

SnackBar 的显示和管理方式：

• ScaffoldMessenger.of(context).showSnackBar()：显示提示框
• clearSnackBars()：清除所有提示框
• hideCurrentSnackBar()：隐藏当前提示框
• 支持自定义位置：通过 behavior 参数

3. 应用场景与使用

SnackBar 可用于多种场景：

• 操作反馈：确认用户操作已完成
• 错误提示：显示错误信息和解决方案
• 成功通知：显示操作成功的消息
• 撤销操作：提供撤销最后操作的选项

代码详解

1. 基础 SnackBar

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('简单提示')),
)

2. 带操作的 SnackBar

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('提示信息'),
    action: SnackBarAction(
      label: '撤销',
      onPressed: () => print('撤销'),
    ),
  ),
)

3. 自定义样式

SnackBar(
  content: Text('成功'),
  backgroundColor: Colors.green,
  duration: Duration(seconds: 2),
)

高级话题：SnackBar 的企业级应用

1. 动态/响应式设计与多屏幕适配

根据屏幕宽度调整提示框宽度，确保在所有设备上都有合适的效果。

final width = MediaQuery.of(context).size.width < 600 ? double.infinity : 400;
SnackBar(content: Text('提示'), width: width)

2. 动画与过渡

为提示框添加动画效果。

SnackBar(
  content: Text('提示'),
  animation: _animation,
  duration: Duration(seconds: 3),
)

3. 搜索/过滤/排序功能

在搜索操作后显示提示。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('找到 ${results.length} 个结果')),
)

4. 选择与批量操作

为批量操作提供反馈。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('已删除 ${count} 项'),
    action: SnackBarAction(label: '撤销', onPressed: _undo),
  ),
)

5. 加载与缓存策略

在加载完成时显示提示。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('数据加载完成')),
)

6. 键盘导航与快捷键

为提示框添加键盘支持。

Focus(
  onKey: (node, event) {
    if (event.isKeyPressed(LogicalKeyboardKey.enter)) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(...));
      return KeyEventResult.handled;
    }
    return KeyEventResult.ignored;
  },
  child: ElevatedButton(...),
)

7. 无障碍支持与屏幕阅读器

为提示框添加无障碍标签。

SnackBar(
  content: Semantics(
    label: '操作成功',
    child: Text('操作成功'),
  ),
)

8. 样式自定义与主题适配

创建可配置的提示框主题。

class SnackBarTheme {
  final Color successColor;
  final Color errorColor;
  final Color warningColor;
  final Duration duration;
  
  const SnackBarTheme({
    this.successColor = Colors.green,
    this.errorColor = Colors.red,
    this.warningColor = Colors.orange,
    this.duration = const Duration(seconds: 3),
  });
}

9. 数据持久化与导出

保存提示历史。

void _saveNotificationHistory() async {
  // 保存提示历史到本地存储
}

10. 单元测试与集成测试

为提示框编写测试用例。

void main() {
  testWidgets('SnackBar 测试', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(home: Scaffold(body: Container())));
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('测试')));
    await tester.pumpAndSettle();
    expect(find.byType(SnackBar), findsOneWidget);
  });
}

OpenHarmony PC 端适配要点

1. 屏幕宽度检测：根据屏幕宽度调整提示框宽度
2. 响应式布局：在 PC 端使用更大的提示框
3. 键盘导航：支持 Enter 等快捷键触发操作
4. 鼠标交互：支持悬停效果
5. 性能优化：避免频繁显示提示框

实际应用场景

1. 操作反馈：确认用户操作已完成
2. 错误提示：显示错误信息和解决方案
3. 成功通知：显示操作成功的消息
4. 撤销操作：提供撤销最后操作的选项
5. 信息提示：显示其他相关信息

扩展建议

1. 支持多种提示类型
2. 实现提示队列管理
3. 添加提示动画效果
4. 支持自定义提示样式
5. 实现提示历史记录

总结

SnackBar 是显示提示信息的强大工具。通过合理的设计和实现，可以创建出功能完整、用户体验良好的提示系统。在 PC 端应用中，充分利用屏幕空间、提供键盘导航和无障碍支持是关键。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net