tongyilingma

在Android中的Flutter要怎么正确显示SnackBar?Flutter正确显示SnackBar方法分享!

倚靠窗畔 2021-08-20 16:09:27 浏览数 (2768)
反馈

今天和大家分享有关于“在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')),
    );
  }
}

Flutter学习Github代码仓库

https://github.com/AiguangLi/Flutter

那么以上的内容就是今天有关于“在Android中的Flutter要怎么正确显示SnackBar?”这个问题的相关内容分享,更多有关于Android的相关知识内容我们都可以在W3Cschool中进行学习和了解!

 

0 人点赞

App下载
App下载

扫描二维码

下载编程狮App

关注有礼
微信公众号

扫码关注 领资料包

意见反馈
帮助中心
返回顶部