如何在Flutter中显示SnackBar [英] How to show SnackBar in Flutter

问题描述

我想在单击底部选项卡时显示SnackBar窗口小部件.我试图将其显示为:

I want to show a SnackBar Widget when the bottom tab is clicked. I am trying to show it as:

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

但是该应用会引发以下异常:

However the app throws the following exception:

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.

Although the exception is self-explanatory. I don't understand why it is occurring since MyHomePage widget has Scaffold in it.

完整代码:

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),
    );
  }
}

推荐答案

您要做有一个脚手架，但没有MyHomePage上下文的 above . 您的脚手架是MyHomePage的子级，而Scaffold.of(context)试图访问最近的父脚手架. 既然没有，它就会崩溃.

You do have a scaffold, but not above the context of MyHomePage. Your Scaffold is a child of MyHomePage, while doing Scaffold.of(context) is trying to access the closest parent Scaffold. And since you have none, it crash.

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

You should probably wrap your BottomNavigationBar into a new class. And use that widget's context to do Scaffold.of(context).

这篇关于如何在Flutter中显示SnackBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！