显示 SnackBar

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 10 课，共 34 课。

SnackBar 是一条简短消息，会从屏幕底部滑出，并在大约 4 秒后自动消失。应用会用它来提示某个操作已成功：已保存、已发送、已删除。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Sent')),
);

从里向外看：SnackBar(...) 是消息，showSnackBar 会把它显示在屏幕上，而 ScaffoldMessenger.of(context) 会找到应用中负责显示消息的部分。

context 是这个组件在组件树中的位置，也就是 build 接收的参数。.of(context) 会从那里沿着组件树向上查找。消息管理器来自 MaterialApp，所以它必须位于你的组件上方。HomePage 位于 MaterialApp 下方，因此它的 context 可以找到消息管理器。MyApp 的 context 位于消息管理器上方，从那里显示 SnackBar 会失败，并出现“ No ScaffoldMessenger widget found ”错误。这也是屏幕需要有自己的类的另一个原因。

挑战

简单

按下 Save 时，显示一条内容为 Note saved 的 SnackBar。

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notes')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Save'),
        ),
      ),
    );
  }
}