第五十二回:Drawer Widget

news/2024/10/30 23:17:09/

文章目录

  • 概念介绍
  • 使用方法
  • 示例代码

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


http://www.ppmy.cn/news/332217.html

相关文章

Qt动态调用(外部调用)SDK库(dll动态库)

Qt动态调用SDK库(dll动态库) ​​​​​​​ 之前的文章,介绍了Qt调用sdk库的方式,大家可以点击查看(Q调用SDK库(dll动态库))之前的文章,里面介绍的调用方式就是静态的调用方式。如下图所示&am…

Android约束布局

一、嵌套布局效率可能很低。 在 Android 开发中,我们常常需要使用嵌套布局来实现某些较复杂的界面效果。但是嵌套层级太深会带来一些问题,主要包括: 视图层级过深,导致内存占用过高和性能下降。Android 需要为每个 View 对象分配内存,嵌套层级过深会创建很多 View 对象,占用较…

京瓷1800打印机扫描步骤_京瓷复印机扫描设置方法京瓷复印机扫描到电脑设置...

京瓷KM-2050/2550/3035/4035/5035扫描卡设置说明 扫描至PC设置步骤 (老款京瓷复印机扫描,新款下方有更新) 1.(1)首先在所在设备上安装京瓷扫描组件。 (2)在初始设定/扫描初始设定/基本系统设定/中设定好IP地址。注意DHCP要选择关。 2.设定发件人及收件人 ]3.ip端口扫描 [有针…

麒麟V10系统U盘引导盘制作手册

麒麟V10-SP1服务器系统U盘引导盘制作手册 一、前期准备 1、安装Fedora刻录软件 下载地址:百度网盘 请输入提取码 提取码:8888 2、一个容量大于8G的U盘(推荐16G以上,空盘) 3、麒麟服务器操作系统镜像(这…

京瓷4501i打印机扫描步骤_京瓷复印机扫描设置方法–京瓷复印机扫描到电脑设置...

京瓷KM-2050/2550/3035/4035/5035扫描卡设置说明 扫描至PC设置步骤 (老款京瓷复印机扫描,新款下方有更新) 京瓷复印机扫描到电脑设置 1.(1)首先在所在设备上安装京瓷扫描组件。 (2)在初始设定/扫描初始设定/基本系统设定/中设定好IP地址。注意DHCP要选择关。 2.设定发件人及…

银河麒麟V10系统安装U盘制作

1、首先打开UltraISO软件,一般选择较新版本的UltraISO软件。 2、 点击工具栏中打开镜像文件工具,如上图红色方框标志按钮,然后在 “打开ISO文件”对话框中找到下载好的Kylin桌面试用版本Kylin-Desktop-V10-Release-Build1-2101-arm64.iso镜像…

中标麒麟桌面版7.0 u盘安装

一、安装前的准备 1、安装U盘启动盘制作工具ultra ISO软件或rufus 软件 2、通过ultra ISO或Rufus制作u盘启动盘 2.1通过ultra ISO制作U盘启动盘 选择“文件”-----“打开”,打开系统光盘镜像ISO文件 选择“启动”-------“写入磁盘镜像”,制作U盘启动…

电脑硬件问题汇总

1,Q:怎样清除忘记的 CMOS 口令? A: (1)快速短接主版上 CMOS 供电电池附近的“Clear CMOS”跳线; (2)如果机器能启动进入 DOS 或 Windows,可以试按照以下步骤清除 CMOS: C:/>DEBUG -o 70 11 -o 71 ff -q 然后,启动机器。 2,Q:“老鼠”为什么…