今天和大家分享有關(guān)于“在Android中的Flutter要怎么正確顯示SnackBar？”這個問題的相關(guān)內(nèi)容分享，希望小編的小伙伴們有所幫助！
簡介
官方API文檔Scaffold的of方法說明有說明調(diào)用Scaffold.of方法是在Scallfold的子組件的Build方法中，也就是不能直接在構(gòu)建Scaffold的build方法里調(diào)用，否則會拋異常。
Typical usage of the Scaffold.of function is to call it from within the build method of a child of a Scaffold.
通常為顯示一個SnackBar需要構(gòu)建一個Builder，通過Builder的context調(diào)用（原因是）
官方示例
顯示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方法可以調(diào)用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!'),
),
);
},
),
);
}
}
錯誤示例
但是若直接在構(gòu)建Scallfold的build方法中調(diào)用會報異常:
錯誤代碼如下所示：
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構(gòu)建
這時候要不就是按官方的，將需要顯示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學(xué)習(xí)Github代碼倉庫
https://github.com/AiguangLi/Flutter
那么以上的內(nèi)容就是今天有關(guān)于“在Android中的Flutter要怎么正確顯示SnackBar？”這個問題的相關(guān)內(nèi)容分享，更多有關(guān)于Android的相關(guān)知識內(nèi)容我們都可以在W3Cschool中進行學(xué)習(xí)和了解！
