Flutter 正确显示SnackBar Flutter 怎样正确显示SnackBar
岛上码农 人气:0想了解Flutter 怎样正确显示SnackBar的相关内容吗,岛上码农在本文为您仔细讲解Flutter 正确显示SnackBar的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Flutter,SnackBar,Flutter,显示SnackBar,下面大家一起来学习吧。
简介
官方API文档Scaffold的of方法说明有说明调用Scaffold.of方法是在Scallfold的子组件的Build方法中,也就是不能直接在构建Scaffold的build方法里调用,否则会抛异常。
Typical usage of the Scaffold.of function is to call it from within the build method of a child of a Scaffold.
通常为显示一个SnackBar需要构建一个Builder,通过Builder的context调用(原因是)
Scallfold.of(context).showSnackBar(SnackBar(contenxt: Text('这是一个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学习Github代码仓库
加载全部内容