未找到脚手架小部件:打开底部对话框时出现异常 sheet
No Scaffold widget found : Getting exception while opening Bottom Dialog sheet
我正在使用 Scaffold 小部件,但是在打开底部对话框时 sheet 我遇到了这个异常
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Calendar"),
),
body: SafeArea(
.......
.......
child: GestureDetector(
onTap: (){
//getting exception here
showBottomSheet(
context: context,
builder: (context) => Container(
color: Colors.red,
));
},
我卡在这段代码上了,如果有人能提出任何建议,那将非常有帮助。谢谢。
使用 showModalBottomSheet
而不是 showBottomSheet
试试下面的 例如
void _settingModalBottomSheet(BuildContext context){
showModalBottomSheet(
context: context,
builder: (BuildContext bc){
return Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.music_note),
title: new Text('Music'),
onTap: () => {}
),
new ListTile(
leading: new Icon(Icons.videocam),
title: new Text('Video'),
onTap: () => {},
),
],
),
);
});
}
问题是用来显示BottomSheet
的context
不是Scaffold
的context
。您可以通过使用 GlobalKey
或将 GestureDetector
包装在 Builder
小部件中来解决此问题,以便它为您提供包含 Scaffold
引用的 context
.
这是一个使用 GlobalKey
的示例,状态为 Scaffold
:
// created the ScaffoldState key
final scaffoldState = GlobalKey<ScaffoldState>();
class MyWidget extends StatelessWidget {
void _showSheet() {
// Show BottomSheet here using the Scaffold state instead ot«f the Scaffold context
scaffoldState.currentState
.showBottomSheet((context) => Container(color: Colors.red));
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldState,
appBar: AppBar(
title: Text("Calendar"),
),
body: SafeArea(child: GestureDetector(onTap: () {
//getting exception here
_showSheet();
})));
}
}
我不是 100% 知道为什么会这样,但我猜是因为它在脚手架之外。
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: SafeArea(child: YourWidget(),
)
);
}
}
class YourWidget extends StatelessWidget {
const YourWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
//getting exception here
showBottomSheet(
context: context,
builder: (context) => Container(
color: Colors.red,
));
}
);
}
}
用 Builder 小部件包裹小部件树
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Calendar"),
),
body: Builder( //HERE
builder:(context){
return SafeArea(
.......
.......
child: GestureDetector(
onTap: (){
//getting exception here
showBottomSheet(
context: context,
builder: (context) => Container(
color: Colors.red,
));
},
我正在使用 Scaffold 小部件,但是在打开底部对话框时 sheet 我遇到了这个异常
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Calendar"),
),
body: SafeArea(
.......
.......
child: GestureDetector(
onTap: (){
//getting exception here
showBottomSheet(
context: context,
builder: (context) => Container(
color: Colors.red,
));
},
我卡在这段代码上了,如果有人能提出任何建议,那将非常有帮助。谢谢。
使用 showModalBottomSheet
而不是 showBottomSheet
试试下面的 例如
void _settingModalBottomSheet(BuildContext context){
showModalBottomSheet(
context: context,
builder: (BuildContext bc){
return Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.music_note),
title: new Text('Music'),
onTap: () => {}
),
new ListTile(
leading: new Icon(Icons.videocam),
title: new Text('Video'),
onTap: () => {},
),
],
),
);
});
}
问题是用来显示BottomSheet
的context
不是Scaffold
的context
。您可以通过使用 GlobalKey
或将 GestureDetector
包装在 Builder
小部件中来解决此问题,以便它为您提供包含 Scaffold
引用的 context
.
这是一个使用 GlobalKey
的示例,状态为 Scaffold
:
// created the ScaffoldState key
final scaffoldState = GlobalKey<ScaffoldState>();
class MyWidget extends StatelessWidget {
void _showSheet() {
// Show BottomSheet here using the Scaffold state instead ot«f the Scaffold context
scaffoldState.currentState
.showBottomSheet((context) => Container(color: Colors.red));
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldState,
appBar: AppBar(
title: Text("Calendar"),
),
body: SafeArea(child: GestureDetector(onTap: () {
//getting exception here
_showSheet();
})));
}
}
我不是 100% 知道为什么会这样,但我猜是因为它在脚手架之外。
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: SafeArea(child: YourWidget(),
)
);
}
}
class YourWidget extends StatelessWidget {
const YourWidget({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
//getting exception here
showBottomSheet(
context: context,
builder: (context) => Container(
color: Colors.red,
));
}
);
}
}
用 Builder 小部件包裹小部件树
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Calendar"),
),
body: Builder( //HERE
builder:(context){
return SafeArea(
.......
.......
child: GestureDetector(
onTap: (){
//getting exception here
showBottomSheet(
context: context,
builder: (context) => Container(
color: Colors.red,
));
},