Question

我想在单击底部选项卡时显示SnackBar Widget。我试图将其显示为：

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的孩子，而private string GetBytes(string file) { using (SHA1CryptoServiceProvider sha1 = new SHA1CryptoServiceProvider()) { var img = new Bitmap(file); ImageConverter converter = new ImageConverter(); var bytes = (byte[])converter.ConvertTo(img, typeof(byte[])); return Convert.ToBase64String(sha1.ComputeHash(bytes)); } }正在尝试访问最近的父脚手架。因为你没有，它会崩溃。

你应该将BottomNavigationBar包装成一个新类。并使用该窗口小部件的上下文来Scaffold.of(context)。

Answer 2

很遗憾我目前无法升级我的Flutter版本，但是，根据我的理解，您只是在按下实时SnackBar时才会显示Icon。

因此，您可能希望将实时Icon改为IconButton并使用其onPressed属性，而不是使用onTap属性BottomNavigationBar 1}}，然后将IconButton包裹在Builder中，类似于以下内容：

new BottomNavigationBar(
          labels: [
            new DestinationLabel(title: new Text("Live"),
              icon: new Builder(builder: (BuildContext context) {
                return new IconButton(icon: new Icon(Icons.live_tv),
                    onPressed: () {
                      Scaffold.of(context).showSnackBar(
                          new SnackBar(content: new Text("Live Clicked")));
                    });
              }),
            ),
            new DestinationLabel(icon: new Icon(Icons.date_range),
                title: new Text("Matches"),)


          ],
        )

我不确定这是否是最好的做法，我们这里的Flutter大师总是建议从多个类中组合更复杂的小部件。

Answer 3

更改_handleBottomNavigationBarTap方法以获取BuildContext参数。

void _handleBottomNavigationBarTap(int newValue, BuildContext context) {
  ...
}

然后按如下方式更改bottomNavigationBar参数：

bottomNavigationBar: new Builder(
  builder: (BuildContext context) {
    return new BottomNavigationBar(
      labels: bottomBarLabels,
      onTap: (index) => _handleBottomNavigationBarTap(index, context),
    );
  }
),

这可确保您致电Scaffold.of(context)，以便能够找到ScaffoldState的祖先context。

Answer 4

'showSnackBar' 已弃用，不应使用。使用 ScaffoldMessenger.showSnackBar。此功能在 v1.23.0-14.0.pre 之后被弃用。

像这样使用：-

NOTE: I am using an very good internet connection broadband of downloading speed upto 120 mbps.

如何在Flutter中显示SnackBar

4 个答案: