《Flutter 控件大全》第四十个:Drawer
程序员文章站
2022-05-30 19:35:12
...
- 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
- 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
- Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
Drawer是一个抽屉导航组件,导航一般使用底部导航BottomNavigationBar或者抽屉导航。
Drawer一般和Scaffold组合使用,用法如下:
Scaffold(
drawer: Drawer(),
)
如果设置了AppBar,而没有设置AppBar的leading
属性,在AppBar的左侧默认出现抽屉的图标,用法如下:
Scaffold(
appBar: AppBar(),
drawer: Drawer(),
)
效果如下:
可以通过点击这个抽屉图标或者从屏幕左侧向右侧滑动打开抽屉,打开抽屉效果如下:
也可以设置Scaffold的endDrawer
属性,在右侧显示一个Drawer,代码如下:
Scaffold(
endDrawer: Drawer(),
)
通过代码的方式打开Drawer,需要获取Scaffold状态,用法如下:
RaisedButton(
child: Text(
'点我,弹出Drawer',
),
onPressed: () {
Scaffold.of(context).openDrawer();
},
)
取消Drawer也很容易,向左滑动即可,当然也可以通过代码的方式控制:
RaisedButton(
child: Text(
'点我,隐藏Drawer',
),
onPressed: () {
Navigator.of(context).pop();
},
)
Drawer里面可以放置任何组件,但是一般使用ListView,分为DrawerHeader和ListTiles,用法如下:
drawer: Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(),
ListTile(),
ListTile(),
ListTile(),
ListTile(),
],
),
),
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper