Vol*_*vus 3 dart navigation-drawer flutter
我想在按下底部菜单中的自定义按钮后打开一个抽屉 我在使用 Scaffold.of(context).openDrawer() 时遇到问题,它不起作用。我的BottomMenu 是一个单独的小部件类。据我了解,它不起作用,因为它是一个单独的上下文。我怎样才能获得正确的上下文?或者也许有人知道另一种解决方案。
这是我的代码复制器:
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 Demo',
home: MyHomePage(title: 'Flutter Drawer'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: BottomMenu(),
endDrawer: SizedBox(
width: double.infinity,
child: Drawer(
elevation: 16,
child: Container(
color: Colors.black,
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('Some context here',
style: TextStyle(color: Colors.white))),
ListTile(
title: Text('Some context here',
style: TextStyle(color: Colors.white))),
],
),
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Call Drawer form menu reproducer',
)
],
),
),
);
}
}
class BottomMenu extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Wrap(
alignment: WrapAlignment.center,
children: <Widget>[
Divider(color: Colors.black, height: 1),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
InkWell(
borderRadius: new BorderRadius.circular(20.0),
customBorder: Border.all(color: Colors.black),
child: Container(
padding: EdgeInsets.only(
left: 3, right: 6, bottom: 15, top: 11),
child: Row(
children: <Widget>[
Icon(Icons.menu),
Text('Show menu', style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
],
),
),
onTap: () {
Scaffold.of(context).openDrawer();
},
),
],
),
),
],
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
问题是您指定了endDraweronScaffold但您正在调用Scaffold.of(context).openDrawer()。
openDrawer()文档指出:
如果脚手架有一个非空的 Scaffold.drawer,则此函数将导致抽屉开始其入口动画。
由于您的drawer值为空,因此什么也没有发生。
相反,openEndDrawer()它告诉我们:
如果脚手架有一个非空的 Scaffold.endDrawer,则此函数将导致末端侧抽屉开始其入口动画。
由于您的endDrawer不为空,因此您应该使用openEndDrawer()方法。或者,如果您不关心抽屉从哪一侧滑入,则可以在构建时使用drawer代替。endDrawerScaffold
我的问题解决了,而不是
Scaffold.of(context).openEndDrawer()
Run Code Online (Sandbox Code Playgroud)
我给 Scaffold 钥匙,然后按状态调用,如下所示
_scaffoldkey.currentState.openEndDrawer()
Run Code Online (Sandbox Code Playgroud)
它解决了我的问题我希望它也适用于你
就我而言,这行得通。
return Scaffold(
key: _scaffoldKey,
endDrawerEnableOpenDragGesture: false, // This!
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.white),
leading: IconButton(
icon: Icon(Icons.menu, size: 36),
onPressed: () => _scaffoldKey.currentState.openDrawer(), // And this!
),
),
drawer: DrawerHome(),
....
Run Code Online (Sandbox Code Playgroud)
并且_scaffoldKey必须初始化为,
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
Run Code Online (Sandbox Code Playgroud)
下课。
| 归档时间: |
|
| 查看次数: |
6278 次 |
| 最近记录: |