欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《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(),
)

效果如下:

《Flutter 控件大全》第四十个:Drawer

可以通过点击这个抽屉图标或者从屏幕左侧向右侧滑动打开抽屉,打开抽屉效果如下:

《Flutter 控件大全》第四十个: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(),
            ],
          ),
        ),