Flutter 如何正确显示SnackBar
作者:岛上码农 时间:2023-06-23 13:00:40
简介
官方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
来源:https://juejin.cn/post/6961011342450884639
标签:Flutter,SnackBar
0
投稿
猜你喜欢
Android获取热点主机ip和连接热点手机ip的代码
2021-07-07 06:14:32
快速解决Android适配底部返回键等虚拟键盘的问题
2021-10-25 14:50:23
Android init.rc文件详解及简单实例
2023-08-02 08:55:09
java的基本数据类型及属性
2021-08-10 19:31:49
Java程序顺序结构中逻辑控制语句详解流程
2023-06-10 17:54:08
Spring Boot接口限流的常用算法及特点
2023-12-20 05:16:30
浅谈一下Spring中的createBean
2023-06-08 22:01:26
springboot实现通过路径从磁盘直接读取图片
2023-09-01 03:01:01
使用Mybatis如何实现删除多个数据
2023-06-15 21:11:57
Android录音功能的实现以及踩坑实战记录
2022-01-06 14:03:29
Android实现USB扫码枪获取扫描内容
2023-09-08 00:56:31
Java中Map接口使用以及有关集合的面试知识点汇总
2021-08-20 00:28:51
java面试题之数组中的逆序对
2021-08-05 10:51:02
Android带进度条的文件上传示例(使用AsyncTask异步任务)
2023-06-24 09:43:11
Java实现AOP功能的封装与配置的小框架实例代码
2022-12-27 10:57:45
C# 常用协议实现模版及FixedSizeReceiveFilter示例(SuperSocket入门)
2023-12-12 04:17:48
c语言重要的字符串与内存函数
2023-04-28 00:35:42
java中Locks的使用详解
2023-11-29 00:18:38
详解Springboot分布式限流实践
2021-07-12 14:29:18
Kotlin协程Channel特点及使用细节详解
2021-06-03 08:12:34