flutter - 展示ModalBottomSheet的脚手架抽屉
问题描述
在myApp()
我有一个无状态小部件的主屏幕上,它包含 aMaterialApp
和 a Scaffold
。Scaffold 有一个属性,drawer
我通过了我创建了一个抽屉,而我抽屉中的一个项目需要showModalBottomSheet
在关闭drawer
. 我怎样才能做到这一点?我试过通过它context
本身,并且作为globalKey.currentContext
(之后GlobalKey<ScaffoldState> globalKey = GlobalKey();
)但抽屉有时会关闭,其他时间给我一个NoMethodFoundException
(或类似的东西)
简而言之,当点击关闭和时,如何拥有一个Scaffold drawer
具有其中一项的项目?drawer
showModalBottomSheet
当前代码:
class Timeline extends StatelessWidget {
@override
Widget build(BuildContext context) {
GlobalKey<ScaffoldState> homeScaffoldKey = GlobalKey();
return MaterialApp(
title: "Test",
theme: ThemeData(
appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.black)),
),
home: Scaffold(
key: homeScaffoldKey,
drawer: showDrawer(homeScaffoldKey.currentContext),
backgroundColor: Colors.grey[100],
body: Stack(
children: <Widget>[
HomePageView(),
AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
),
],
),
),
);
}
}
Drawer showDrawer(BuildContext context) {
void showCalendarsModalBottom() {
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return ListView.builder(
itemCount: repo.calendars.length,
itemBuilder: (builder, index) {
return StatefulBuilder(
builder: (builder, StateSetter setState) => ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Checkbox(
value: repo.getIsEnabledCal(repo.getCal(index)),
onChanged: (value) {
setState(() {
repo.toggleCalendar(repo.getCal(index));
});
},
),
Container(
height: 14,
width: 14,
margin: EdgeInsets.only(left: 2, right: 6),
decoration: BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.circle,
),
),
Text(
repo.getCal(index).name,
style: TextStyle(
fontSize: 16,
),
),
],
),
onTap: () {
setState(() {
repo.toggleCalendar(repo.getCal(index));
});
},
),
);
},
);
},
);
}
return Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Align(
child: Text('Timeline', textScaleFactor: 2),
alignment: Alignment.bottomLeft,
),
),
ListTile(
title: Text('Dark Mode'),
onTap: () => Navigator.pop(context),
),
ListTile(
title: Text('Calenders'),
onTap: () {
Navigator.pop(context);
showCalendarsModalBottom();
},
)
],
),
);
}
解决方案
根据您的代码片段更新了工作代码:
您需要有statefulwidget
这将有助于将上下文从抽屉传递到底页,并context
在方法中作为参数传递showCalendarModalBottomSheet()
。
void main() {
runApp(new MaterialApp(home: Timeline(), debugShowCheckedModeBanner: false));
}
class Timeline extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Test",
theme: ThemeData(
appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.black)),
),
home: MyHomePage()
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: AppDrawer(),
backgroundColor: Colors.grey[100],
body: Stack(
children: <Widget>[
//HomePageView(),
AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
)
],
)
);
}
Widget AppDrawer() {
return Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Align(
child: Text('Timeline', textScaleFactor: 2),
alignment: Alignment.bottomLeft,
),
),
ListTile(
title: Text('Dark Mode'),
onTap: () => Navigator.pop(context),
),
ListTile(
title: Text('Calenders'),
onTap: () {
Navigator.of(context).pop();
showCalendarsModalBottom(context);
},
)
],
),
);
}
Future<Null> showCalendarsModalBottom(context) {
return showModalBottomSheet(context: context, builder: (context) => Container(
color: Colors.red,
// your code here
));
}
}
输出是:当点击应用程序抽屉菜单日历时,它会无缝关闭并打开底页。如果您再次点击应用程序抽屉并重复步骤,您会看到抽屉和底页之间的平滑过渡。希望这能回答你的问题。
推荐阅读
- arrays - 验证下拉选择
- c++ - 用于替换其参数中的标识符的宏
- angular - 如何使用令牌将 angular7 连接到 liferay?
- c# - 异步返回多个值
- shell - 如何将批处理迁移到外壳?
- arrays - 如何在 Dart 中循环/映射 json 对象
- javascript - 将blob转换为可下载的文件Angular8
- android - 没有找到类“android.provider.MediaStore$Downloads”
- kubernetes - 在 Amazon EKS 中预置具有静态内容的节点的正确方法是什么?
- entity-framework - “当前数据库提供程序不支持该属性”