高防服务器

在Android中的Flutter要如何正确显示SnackBar


在Android中的Flutter要如何正确显示SnackBar

发布时间:2022-02-25 14:39:05 来源:高防服务器网 阅读:66 作者:小新 栏目:开发技术

小编给大家分享一下在Android中的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')),      );    }  }

看完了这篇文章,相信你对“在Android中的Flutter要如何正确显示SnackBar”有了一定的了解,如果想了解更多相关知识,欢迎关注高防服务器网行业资讯频道,感谢各位的阅读!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[