Flutter 零基础入门（三十七）：SnackBar 与提示信息 —— 页面反馈与用户交互必学

LarryLan

发布于 2026-03-03 13:04:19

390

SnackBar 与提示信息 —— 页面反馈与用户交互必学

到目前为止，你已经可以：

写动态页面（StatefulWidget + setState）
处理异步操作（Future / async / await）
表单校验（Form / TextFormField）

但如果你的 App 没有任何 操作反馈，用户体验会非常差：

点击按钮没反应 → 用户疑惑
数据保存成功没提示 → 用户不确定
表单校验错误 → 用户不知道哪里错

Flutter 提供了 SnackBar / AlertDialog / Toast 来解决这些问题。

一、SnackBar：页面底部提示信息

1️⃣ 最简单的 SnackBar

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('操作成功')),
);

📌 特点：

出现在页面底部
自动消失
适合短时提示

2️⃣ 完整示例

ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('保存成功'),
        duration: Duration(seconds: 2),
      ),
    );
  },
  child: Text('显示 SnackBar'),
)

📌 参数说明：

content → 显示内容
duration → 显示时长
backgroundColor → 背景色可自定义

二、SnackBar 与异步操作结合

ElevatedButton(
  onPressed: () async {
    await Future.delayed(Duration(seconds: 2));
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('异步操作完成')),
    );
  },
  child: Text('异步提示'),
)

📌 异步完成后提示用户操作结果 → UX 更友好

三、SnackBar 进阶属性

SnackBar(
  content: Text('操作成功'),
  duration: Duration(seconds: 3),
  backgroundColor: Colors.green,
  action: SnackBarAction(
    label: '撤销',
    onPressed: () {
      print('用户点击撤销');
    },
    textColor: Colors.white,
  ),
)

action → 提供按钮操作，例如撤销、重试
backgroundColor → 自定义颜色

四、AlertDialog：弹窗提示

1️⃣ 简单提示框

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('提示'),
      content: Text('确定要删除吗？'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('取消'),
        ),
        TextButton(
          onPressed: () {
            print('删除操作');
            Navigator.pop(context);
          },
          child: Text('确定'),
        ),
      ],
    );
  },
);

📌 特点：

弹出在页面中央
阻塞操作（必须选择）
常用于确认、警告

五、SnackBar vs AlertDialog

组件	适用场景	特点
SnackBar	提示操作结果	非阻塞，短时显示
AlertDialog	重要确认 / 提醒	阻塞用户操作，需要响应

六、用户操作反馈示例

假设表单提交后：

if (_formKey.currentState!.validate()) {
  // 异步提交
  await Future.delayed(Duration(seconds: 1));
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('提交成功')),
  );
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('请检查表单信息')),
  );
}

📌 用户体验大幅提升：