如你所见,我的按钮在刑台的身体里。但是我得到了这个异常:
使用不包含脚手架的上下文调用Scaffold.of()。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SnackBar Playground'),
),
body: Center(
child: RaisedButton(
color: Colors.pink,
textColor: Colors.white,
onPressed: _displaySnackBar(context),
child: Text('Display SnackBar'),
),
),
);
}
}
_displaySnackBar(BuildContext context) {
final snackBar = SnackBar(content: Text('Are you talkin\' to me?'));
Scaffold.of(context).showSnackBar(snackBar);
}
编辑:
我找到了这个问题的另一个解决方案。如果我们给Scaffold一个键GlobalKey<ScaffoldState>,我们就可以像下面那样显示SnackBar,而不需要在Builder小部件中包装我们的主体。返回脚手架的小部件应该是一个有状态的小部件。
_scaffoldKey.currentState.showSnackBar(snackbar);
你可以使用GlobalKey。唯一的缺点是使用GlobalKey可能不是最有效的方法。
这样做的一个好处是,您还可以将该键传递给其他不包含任何脚手架的自定义小部件类。见(这里)
class HomePage extends StatelessWidget {
final _scaffoldKey = GlobalKey<ScaffoldState>(); \\ new line
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey, \\ new line
appBar: AppBar(
title: Text('SnackBar Playground'),
),
body: Center(
child: RaisedButton(
color: Colors.pink,
textColor: Colors.white,
onPressed: _displaySnackBar(context),
child: Text('Display SnackBar'),
),
),
);
}
_displaySnackBar(BuildContext context) {
final snackBar = SnackBar(content: Text('Are you talkin\' to me?'));
_scaffoldKey.currentState.showSnackBar(snackBar); \\ edited line
}
}
发生此异常是因为您正在使用实例化Scaffold的小部件的上下文。不是脚手架的孩子的背景。
你可以通过使用不同的上下文来解决这个问题:
Scaffold(
appBar: AppBar(
title: Text('SnackBar Playground'),
),
body: Builder(
builder: (context) =>
Center(
child: RaisedButton(
color: Colors.pink,
textColor: Colors.white,
onPressed: () => _displaySnackBar(context),
child: Text('Display SnackBar'),
),
),
),
);
注意,虽然我们在这里使用Builder,但这并不是获得不同BuildContext的唯一方法。
还可以将子树提取到不同的小部件中(通常使用提取小部件重构)
更新- 2021年
脚手架.of(context)已弃用,改用ScaffoldMessenger。
从方法的文档中检查:
脚手架信使现在处理SnackBars以便持久跨
并且总是显示在当前脚手架上。缺省情况下,
脚手架信使的根是包含在MaterialApp,但你可以
为ScaffoldMessenger创建自己的可控范围
控制哪个脚手架接收你的零食棒。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo')
),
body: Builder(
// Create an inner BuildContext so that the onPressed methods
// can refer to the Scaffold with Scaffold.of().
builder: (BuildContext context) {
return Center(
child: RaisedButton(
child: Text('SHOW A SNACKBAR'),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Hello!'),
));
},
),
);
},
),
);
}
你可以在这里查看详细的弃用和新方法:
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Builder(
builder: (context) => RaisedButton(
onPressed: () {
final snackBar = SnackBar(
content: Text("added to cart"),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change.
},
),
);
},
textColor: Colors.white,
color: Colors.pinkAccent,
child: Text("Add To Cart",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.w600)),
),
),
),
)