第五十二回：Drawer Widget

我们在上一章回中介绍了TabBarView Widget相关的内容,本章回中将介绍 Drawer Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们这里介绍的Drawer Widget是指从屏幕左侧推出的菜单，国内有些地方把它翻译成抽屉。它在垂直方向上铺满整个屏幕，甚至覆盖程序的AppBar和手机的顶部的状态栏，水平方向大约占用半个屏幕，不过这个宽度可以调整。它通常用来显示个人信息或者设置信息。

Drawer属于MatirialDesign的内容，因此它需要和MaterialApp以及Scaffold组件一起配合使用。本章回中将详细介绍它的使用方法以及如何和其它组件配合使用。

使用方法

和其它的Widget一样，TabBar Widget提供了相关的属性来控制自己，下面是常用的属性：

• backgroundColor属性：用来控制Drawer的背景颜色；
• width属性：用来控制Drawer的宽度，也就是水平方向占用屏幕的大小；
• child属性：用来控制Drawer中显示的内容，通常使用ListView组件给它赋值；

上面的属性不多，不过使用时还有一些注意事项，详细如下：

• drawer组件需要赋值给Scaffold组件的drawer属性才可以使用，赋值后会自动在AppBar中leading属性所在的位置生成一个menu图标，点击menu图标时从屏幕左侧弹出drawer菜单。还有一种方式是在屏幕左侧向右滑动也可以拉出菜单，不过我没有成功，因为现在Android系统把这个滑动做成了界面退出功能(可以关闭)；
• width属性可以不设置，默认值大约在300dp左右，大家可以依据项目的需求来调整宽度；
• child属性：通常使用ListView组件给它赋值,这样可以让菜单中的内容呈列表状态来排列。此外Flutter还专门提供了DrawerHeader组件来控制Drawer中显示的内容，这样可以让Drawer中内容更加规范和标准，我们在后面章回中将详细介绍相关的内容；

示例代码

//把drawer做成一个独立的对象
final Drawer _drawer = Drawer(
    //设置整个drawer的背景颜色
    backgroundColor: Colors.lightGreen,
    width: 200,
    child: ListView(
      //drawer内部的list对drawer边缘的间距
      padding: const EdgeInsets.all(8),
      children: const [
        //drawer中的选项，也就是list中的item
        ListTile(
          leading: Icon(Icons.settings),
          title: Text("Settings"),
          //控制整个Listtile的颜色，而不只是title的颜色
          tileColor: Colors.blue,
        ),
        ListTile(
          leading: Icon(Icons.message),
          title: Text("Messages"),
        ),
      ],
    ),
  );
}

上面的代码把Drawer封装成了一个独立的对象，在使用它的时候直接赋值给Scaffold组件的drawer属性就可以。我们在代码中添加了详细的注释，有助于大家理解代码的含义。

这里只列出了核心的代码，完整的代码可以参考Github上ex023文件中的内容。编译并且运行上面的程序就会在AppBar中leading属性所在的位置生成一个menu图标，点击menu图标时从屏幕左侧弹出drawer菜单。drawer菜单中只有两个列表条目，列表条目左侧是图标，右侧是文字，如果大家不喜欢的话，可以自己来控制ListTile组件，打造自己喜欢的列表条件。我在这里就演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于Drawer Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!