如何在Flutter中确显示SnackBar

如何在Flutter中确显示SnackBar？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

官方示例

显示SnackBar，官方典型示例代码如下所示：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Code Sample for Scaffold.of.',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: Scaffold(        body: MyScaffoldBody(),        appBar: AppBar(title: Text('Scaffold.of Example')),      ),      color: Colors.white,    );  }}// 在Scaffold子组件里的build方法可以调用Scaffold.of方法class MyScaffoldBody extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Center(      child: RaisedButton(        child: Text('SHOW A SNACKBAR'),        onPressed: () {          Scaffold.of(context).showSnackBar(            SnackBar(              content: Text('Have a snack!'),            ),          );        },      ),    );  }}

错误示例

但是若直接在构建Scallfold的build方法中调用会报异常:

Scaffold.of() called with a context that does not contain a Scaffold.

错误代码如下所示：

import 'package:flutter/material.dart';class ScaffoldSnackBarDemo extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: RaisedButton(          child: Text('SHOW A SNACKBAR'),          onPressed: () {            ///直接在Scallfold的build方法里使用会抛异常            Scaffold.of(context).showSnackBar(              SnackBar(                content: Text('Have a snack!'),              ),            );          },        ),      ),      appBar: AppBar(title: Text('Scaffold.of Example')),    );  }}

解决方法一：Scaffold的子组件通过Builder构建

这时候要不就是按官方的，将需要显示SnackBar的代码另外抽离一个自定义子组件，在子组件的build方法再显示SnackBar，要不就是在Scaffold的build方法体对该子组件再包一层Builder，如下所示。

import 'package:flutter/material.dart';class ScaffoldSnackBarDemo extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return Scaffold(       ///在子组件外再包一层builder，让context不共用      body: Builder(builder: (context) {        return Center(          child: RaisedButton(            child: Text('SHOW A SNACKBAR'),            onPressed: () {              Scaffold.of(context).showSnackBar(                SnackBar(                  content: Text('Have a snack!'),                ),              );            },          ),        );      }),      appBar: AppBar(title: Text('Scaffold.of Example')),    );  }}

解决方法二：使用GlobalKey存储ScaffoldState

import 'package:flutter/material.dart';class ScaffoldSnackBarDemo extends StatelessWidget {  final _scallfoldKey = GlobalKey<ScaffoldState>();  @override  Widget build(BuildContext context) {    return Scaffold(      ///使用GlobalKey解决      key: _scallfoldKey,      body: Center(        child: RaisedButton(          child: Text('SHOW A SNACKBAR'),          onPressed: () {            _scallfoldKey.currentState.showSnackBar(SnackBar(              content: Text('Have a snack!'),            ));          },        ),      ),      appBar: AppBar(title: Text('Scaffold.of Example')),    );  }}

看完上述内容，你们掌握如何在Flutter中确显示SnackBar的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网精选频道，感谢各位的阅读！