Question

这是Flutter.io的官方标签演示。我想在一个由RadioButton触发的标签中添加snackbar。

我把它包装在一个Scaffold小部件中。它不是在TabBarView中工作，而是在单个radioButton中工作。但是当我把Snackbar放在一个标签中时，没有任何显示。

代码的主要部分如下所示

class MyApp extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
     return new MaterialApp(
       title: 'Flutter Demo',
       theme: new ThemeData(

       primarySwatch: Colors.blue,
       ),
       home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
        appBar: new AppBar(
          bottom: new TabBar(tabs: [
            new Tab(icon: new Icon(Icons.home)),
            new Tab(icon: new Icon(Icons.favorite)),
            new Tab(icon: new Icon(Icons.list))
          ]),
          title: new Text("Tabs Demo"),
        ),
        body: new TabBarView(children: [
          new MyHomePage(),
          new Center(
              child: new RaisedButton(
                onPressed: () {
                  final snackBar = new SnackBar(
                    content: new Text('Yay! A SnackBar!'),
                    action: new SnackBarAction(
                      label: 'Undo',
                      onPressed: () {
                        // Some code to undo the change!
                      },
                    ),
                  );

                  // Find the Scaffold in the Widget tree and use it to show a SnackBar!
                  Scaffold.of(context).showSnackBar(snackBar);
                },
                child: new Text('Show SnackBar'),
              )
          ),
            new Center(
              child: new IconButton(icon: new Icon(Icons.add), onPressed: (){
                final snackBar = new SnackBar(
                  content: new Text('Yay! A SnackBar!'),
                  action: new SnackBarAction(
                    label: 'Undo',
                    onPressed: () {
                      // Some code to undo the change!
                    },
                  ),
                );

                // Find the Scaffold in the Widget tree and use it to show a SnackBar!
                Scaffold.of(context).showSnackBar(snackBar);
              })
            ),
        ]),
      )),
);
}
 }

Answer 1

Add a GlobalKey of the Scaffold state and use that to display SnackBar as below,

GlobalKey<ScaffoldState> scaffoldState = new GlobalKey();

Scaffold(
key: scaffoldState,

....

scaffoldState.currentState.showSnackBar(new SnackBar(content: new Text('Hello!')));

....

);

Answer 2

我在另一篇帖子how-to-show-snackbar-in-flutter

中找到了解决方案

我意识到Scaffold.of（context）中的上下文必须嵌入Scaffold小部件中，这意味着将Snackbar包装在另一个小部件中是必要的。代码示例如下：

class ShowSnackBarBtn extends StatelessWidget{
   @override
   Widget build(BuildContext context) {
   // TODO: implement build
   return new Center(
    child: new RaisedButton(
      onPressed: () {
        final snackBar = new SnackBar(
          content: new Text('Yay! A SnackBar!'),
          action: new SnackBarAction(
            label: 'Undo',
            onPressed: () {
              // Some code to undo the change!
            },
          ),
        );

        // Find the Scaffold in the Widget tree and use it to show a SnackBar!
        Scaffold.of(context).showSnackBar(snackBar);
      },
      child: new Text('Show SnackBar'),
    )
);
}
}

然后就我而言，我只需将这段代码放在TabBarView

中

class MyApp extends StatelessWidget {

 // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
  return new MaterialApp(
  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: new DefaultTabController(
      length: 3,
      child: new Scaffold(
        appBar: new AppBar(
          bottom: new TabBar(tabs: [
            new Tab(icon: new Icon(Icons.home)),
            new Tab(icon: new Icon(Icons.favorite)),
            new Tab(icon: new Icon(Icons.list))
          ]),
          title: new Text("Tabs Demo"),
        ),
        body: new TabBarView(children: [
          new MyHomePage(),
          new ShowSnackBarBtn(),
          new ShowSnackBarIcon(),
        ]),
      )),
);
}
}

最后，抱歉没有发布该例外。我想知道为什么它在Android Studion连接我的手机时没有显示任何登录控制台。但是，当我在模拟器中调试程序时，抛出的异常显示在控制台中。

flutter-SnackBar不在TabBarView中显示

2 个答案: