flutter - 如何在 Flutter 中显示 SnackBar

Question

我想在单击底部选项卡时显示一个 SnackBar 小部件。我试图将其显示为:

Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("Live Clicked"),
              ));

但是应用抛出以下异常:

I/flutter ( 4965): The following assertion was thrown while handling a gesture:
I/flutter ( 4965): Scaffold.of() called with a context that does not contain a Scaffold.
I/flutter ( 4965): No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of(). This
I/flutter ( 4965): usually happens when the context provided is from the same StatefulWidget as that whose build
I/flutter ( 4965): function actually creates the Scaffold widget being sought.
I/flutter ( 4965): There are several ways to avoid this problem. The simplest is to use a Builder to get a context that
I/flutter ( 4965): is "under" the Scaffold. For an example of this, please see the documentation for Scaffold.of():
I/flutter ( 4965):   https://docs.flutter.io/flutter/material/Scaffold/of.html
I/flutter ( 4965): A more efficient solution is to split your build function into several widgets. This introduces a
I/flutter ( 4965): new context from which you can obtain the Scaffold. In this solution, you would have an outer widget
I/flutter ( 4965): that creates the Scaffold populated by instances of your new inner widgets, and then in these inner
I/flutter ( 4965): widgets you would use Scaffold.of().
I/flutter ( 4965): A less elegant but more expedient solution is assign a GlobalKey to the Scaffold, then use the
I/flutter ( 4965): key.currentState property to obtain the ScaffoldState rather than using the Scaffold.of() function.
I/flutter ( 4965): The context used was:
I/flutter ( 4965):   MyHomePage(state: _MyHomePageState(603645610))

虽然异常是不言自明的。我不明白为什么会发生这种情况，因为 MyHomePage 小部件中有 Scaffold。

完整代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App Name',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'App Name'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var bottomBarLabels = [
    new DestinationLabel(
        icon: new Icon(Icons.live_tv), title: new Text("Live")),
    new DestinationLabel(
        icon: new Icon(Icons.date_range), title: new Text("Matches")),
  ];

  @override
  Widget build(BuildContext context) {
    void _handleBottomNavigationBarTap(int newValue) {
      switch (newValue) {
        case 0:
          print("Live Clicked");
          Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("Live Clicked"),
              ));
          break;
        case 1:
          print("Matches Clicked");
          break;
      }
    }

    return new Scaffold(
      key: new Key("homepage"),
      appBar: new AppBar(
        title: new Text(config.title),
      ),
      bottomNavigationBar: new BottomNavigationBar(
          labels: bottomBarLabels, onTap: _handleBottomNavigationBarTap),
    );
  }
}

Answer 1

您确实有一个脚手架，但不是MyHomePage 的上下文。您的脚手架是 MyHomePage 的子级，而执行 Scaffold.of(context) 时试图访问最近的 parent 脚手架。因为你没有，所以它崩溃了。

您可能应该将 BottomNavigationBar 包装到一个新类中。并使用该小部件的上下文来执行 Scaffold.of(context)。