Flutter 如何正確顯示SnackBar
更新時間：2021年05月14日 10:58:51 作者：島上碼農(nóng)
Snackbar是Android支持庫中用于顯示簡單消息并且提供和用戶的一個簡單操作的一種彈出式提醒。當使用Snackbar時，提示會出現(xiàn)在消息最底部，通常含有一段信息和一個可點擊的按鈕。本文主要介紹了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
以上就是Flutter 如何正確顯示 SnackBar的詳細內(nèi)容，更多關于Flutter 正確顯示 SnackBar的資料請關注腳本之家其它相關文章！
相關文章
android自定義view實現(xiàn)數(shù)字進度條
這篇文章主要為大家詳細介紹了android自定義view實現(xiàn)數(shù)字進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了在Android設備上獲取CPU型號是一項常見的任務的相關資料,需要的朋友可以參考下2023-10-10
flutter監(jiān)聽app進入前后臺狀態(tài)的實現(xiàn)
在開發(fā)app的過程中，我們經(jīng)常需要知道app處于前后臺的狀態(tài)，本文主要介紹了flutter監(jiān)聽app進入前后臺狀態(tài)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要為大家詳細介紹了Android自制精彩彈幕效果，彈幕垂直方向可固定隨機，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
詳解Android中Activity運行時屏幕方向與顯示方式
本文主要對如何控制Android中Activity運行時屏幕方向與顯示方式進行詳細全面的實例講解。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
本篇文章主要介紹Android 延遲, 在Android 程序開發(fā)過程中經(jīng)常會遇到程序推遲時間執(zhí)行,這里整理了幾種方法,以便Android 開發(fā)的朋友參考2016-07-07
在日常生活中，經(jīng)常用到qq，微信截圖分享功能，今天小編通過本文給大家介紹Android實現(xiàn)截圖分享qq 微信功能，具體實現(xiàn)代碼大家參考下本文2017-12-12
這篇文章主要介紹了Android定時器和Handler用法,實例分析了Android中的定時器與Handler相關使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了android實現(xiàn)定時拍照功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了Kotlin自定義菜單控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07