在 Flutter 中显示 SnackBar [英] Display SnackBar in Flutter

问题描述

我想在 Flutter 的有状态小部件中显示一个简单的 SnackBar.我的应用程序使用名为 MyHomePage 的有状态小部件创建了 MaterialApp 的新实例.

I want to display a simple SnackBar inside Flutter's stateful widget. My application creates new instance of MaterialApp with a stateful widget called MyHomePage.

我尝试在 showSnackBar() 方法中显示 SnackBar.但它失败了方法 'showSnackBar' was called on null'.

I try to show the SnackBar in showSnackBar() method. But it fails with 'The method 'showSnackBar' was called on null'.

这段代码有什么问题?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    showInSnackBar("Some text");
  }

  @override
  Widget build(BuildContext context) {
    return new Padding(
            key: _scaffoldKey,
            padding: const EdgeInsets.all(16.0),
            child: new Text("Simple Text")
    );
  }

  void showInSnackBar(String value) {
    _scaffoldKey.currentState.showSnackBar(new SnackBar(
        content: new Text(value)
    ));
  }
}

解决方案:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: new Scaffold(body: new MyHomePage()),
      );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    showInSnackBar("Some text");
    return new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Scaffold(
          body: new Text("Simple Text")
        )
    );
  }

  void showInSnackBar(String value) {
    Scaffold.of(context).showSnackBar(new SnackBar(
        content: new Text(value)
    ));
  }
}

推荐答案

存在三个问题.第一个是您在任何地方都没有 Scaffold，而 Scaffold 小部件知道如何显示小吃店.第二个是你有一把钥匙来抓住脚手架，但你已经把它放在了 Padding 上(而 Paddings 对小吃店一无所知).第三是您在与其关联的小部件有机会被初始化之前使用了密钥，因为 initState 在构建之前被调用.

There's three problems. The first is that you don't have a Scaffold anywhere, and the Scaffold widget is the one that knows how to show snack bars. The second is that you have a key for getting a hold of the scaffold, but you've put it on a Padding instead (and Paddings don't have any knowledge of snack bars). The third is that you've used the key before the widget that it's associated with has had a chance to be initialised, since initState is called before build.

最简单的解决方案是将 MyApp 小部件中的 home 行更改为:

The simplest solution is to change the home line in your MyApp widget to:

home: new Scaffold(body: new MyHomePage()),

...然后删除所有提及的 _scaffoldKey 并改为使用 Scaffold.of(context) 您当前拥有的 _scaffoldKey.currentState.

...and then remove all mention of _scaffoldKey and instead use Scaffold.of(context) where you currently have _scaffoldKey.currentState.

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