第五十二回：Drawer Widget

原创已于 2023-06-22 09:26:02 修改 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #flutter #drwaer #抽屉菜单 #scaffold

于 2023-06-11 21:00:00 首次发布

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章介绍了Flutter中的DrawerWidget，它是从屏幕左侧推出的菜单，通常用于显示个人信息或设置。Drawer需要与MaterialApp和Scaffold组件配合使用，可以通过设置backgroundColor、width和child等属性来控制其外观和内容。示例代码展示了如何创建一个包含列表项的Drawer，并将其添加到Scaffold的drawer属性中，以实现点击menu图标或滑动屏幕左侧来显示菜单的功能。

我们在上一章回中介绍了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的内容就介绍到这里，欢迎大家在评论区交流与讨论!