如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件

Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板。通常Drawer是和ListView组件组合使用的。

Drawer组件属性及说明
属性名 类型 默认值 说明
child Widget   Drawer的child可以放置任意可显示的对象
elevation double 16 墨纸设计中组件的z坐标顺序

Drawer组件可以添加头部效果,用DrawerHeader和UserAccountsDrawerHeader这两个组件可以实现。

DrawerHeader:展示基本信息

UserAccountsDraweHeader:展示用户头像、用户名、Email等信息

DrawerHeader组件属性及描述

属性名 类型 说明
decoration Decoration header区域的decoration,通常用来设置背景颜色或者背景图片
curve Curve 如果decoration发生了变化,则会使用curve设置的变化曲线和duration设置的动画时间来做一个切换动画
child Widget header里面所显示的内容控件
padding EdgeInsetsGeometry header里面内容控件的padding指。如果child为null的话,则这个值无效
margin EdgeInsetsGeometry header四周的间隙
UserAccountsDrawerHeader组件属性及说明
属性名 类型 说明
margin EdgeInsetsGeometry Header四周的间隙
decoration Decoration header区域的decoration,通常用来设置背景颜色或者背景图片
currentAccountPicture Widget 用来设置当前用户的头像
otherAccountsPictures List<Widget> 用来设置当前用户其他账号的头像
accountName Widget 当前用户名
accountEmail Widget 当前用户Email
onDetailsPressed VoidCallBack 当accountName或accountEmail被点击的时候所触发的回调函数,可以用来显示其他额外的信息

Demo示例:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget{final List<Tab> _mTabs = <Tab>[Tab(text: 'Tab1',icon: Icon(Icons.airline_seat_flat_angled),),Tab(text: 'Tab2',icon: Icon(Icons.airline_seat_flat_angled),),Tab(text: 'Tab3',icon: Icon(Icons.airline_seat_flat_angled),),];@overrideWidget build(BuildContext context) {return new MaterialApp(title: 'Drawer Demo',home: DefaultTabController(length: _mTabs.length,child: new Scaffold(appBar: new AppBar(//自定义Drawer的按钮
              leading: Builder(builder: (BuildContext context){return IconButton(icon: Icon(Icons.wifi_tethering),onPressed: (){Scaffold.of(context).openDrawer();});}),title: new Text('Drawer Demo'),backgroundColor: Colors.cyan,bottom: new TabBar(tabs: _mTabs),),body: new TabBarView(children: _mTabs.map((Tab tab){return new Center(child: new Text(tab.text),);}).toList()),drawer: Drawer(child: ListView(children: <Widget>[Container(height: 150,child: UserAccountsDrawerHeader(//设置用户名accountName: new Text('Drawer Demo 抽屉组件'),//设置用户邮箱accountEmail: new Text('www.baidu.com'),//设置当前用户的头像currentAccountPicture: new CircleAvatar(backgroundImage: new AssetImage('images/timg.jpg'),),//回调事件
                        onDetailsPressed: (){},),),ListTile(leading: Icon(Icons.wifi),title: new Text('无线网络1'),subtitle: new Text('我是副标题'),),ListTile(leading: Icon(Icons.wifi),title: new Text('无线网络2'),subtitle: new Text('我是副标题'),),ListTile(leading: Icon(Icons.wifi),title: new Text('无线网络3'),subtitle: new Text('我是副标题'),onTap: (){print('ssss');},),ListTile(leading: Icon(Icons.wifi),title: new Text('无线网络4'),subtitle: new Text('我是副标题'),),],),),)),);}
}

效果截图:

Demo感觉没什么好解释的,就是一般的简单用法,特别说一下,添加Drawer组件,Scaffold会自动给我们生成一个Drawer的按钮,如果我们在appBar中手动设置leading,确实是会更改这个按钮的图标,但是点击这个图标就不会弹出Drawer了,所以如果我们有需要自定义Drawer的图标的话,需要如下处理:

            leading: Builder(builder: (BuildContext context){return IconButton(icon: Icon(Icons.wifi_tethering),onPressed: (){Scaffold.of(context).openDrawer();});}),    

Flutter学习笔记(18)--Drawer抽屉组件相关推荐

  1. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  2. Flutter学习笔记--Gridview网格组件制作相册

    Flutter学习笔记–Gridview网格组件制作相册 效果: GridView可以构建一个二维网格列表,其官方定义参考: https://book.flutterchina.club/chapte ...

  3. Flutter学习笔记 —— 完成一个简单的新闻展示页

    Flutter学习笔记 -- 完成一个简单的新闻展示页 前言 思路分析 案例代码 结束语 上图 前言 刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...

  4. Flutter学习笔记(一)

    Flutter学习笔记(一) 学习前言 dart安装 vscode配置 持续更新中 学习前言 最近准备学习Flutter,参考B站 Dart Flutter教程_2022精讲Dart Flutter3 ...

  5. Flutter学习笔记 —— CustomPainter自定义画布绘制爱心

    Flutter学习笔记 -- CustomPainter自定义画布绘制爱心 前言 效果图 代码示例 温馨提示 结束语 前言 最近在学习Flutter中 Canvas相关内容,今天尝试写了一个爱心Dem ...

  6. 【计算机网络学习笔记18】防火墙技术、入侵检测技术

    [计算机网络学习笔记18]防火墙技术.入侵检测技术 一.防火墙 防火墙 (firewall) :一种访问控制技术,通过严格控制进出网络边界的分组,禁止任何不必要的通信,从而减少潜在入侵的发生,尽可能降 ...

  7. amazeui学习笔记--css(常用组件4)--关闭按钮Close

    amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

  8. Hadoop学习笔记—18.Sqoop框架学习

    Hadoop学习笔记-18.Sqoop框架学习 一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据 ...

  9. Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel

    Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只有单元格会进入编辑模式,而行编辑模式中则对编辑行的所有可编辑字段统一进行 ...

最新文章

  1. “巨杉数据库”获1000万美元B轮融资,DCM领投
  2. Spring-基于Java类的配置
  3. mysql索引如何做_5分钟,告诉你MySQL字符串怎么做索引
  4. 经典算法系列之(一) - BitMap [数据的压缩存储]
  5. Java and Jakarta - Hybris
  6. Docker 实战笔记
  7. php输出远程文件边读边下载,php file_get_contents读取远程文件并输出
  8. P3159-[CQOI2012]交换棋子【费用流】
  9. 相机添加多张图片css布局
  10. 蓝桥杯(java)阶乘计算,输入一个正整数n,输出n!的值。(高精度计算,用到数组)
  11. ts获取服务器数据_在 Angular6 中使用 HTTP 请求服务端数据
  12. Html 中判断某个class的个数
  13. PMP培训班备考资料分享
  14. golang 腾讯云直播开发日记(一)
  15. 电力电子,电机控制系统的建模与仿真
  16. P2构型并联混合动力汽车Cruise整车仿真模型
  17. 货币银行学重点内容复习
  18. 两种特殊卷积:转置卷积和空洞卷积
  19. 服务器winsxs文件夹怎么清理工具,win7 winsxs文件夹怎么清理|win7清理winsxs文件夹方法...
  20. OpenGL_10 3D空间中移动图像

热门文章

  1. android 后台杀不死的进行实现
  2. 加强野外火源管控,森林防火二维码
  3. OGeek网络安全挑战赛圆满收官,OPPO倾力培养高校尖端人才
  4. Win10系统无法正常关闭护眼模式怎么办?
  5. 深度优先算法的应用——农夫过河问题
  6. php调扫描仪,操作篇——用扫描仪怎样才能把照片扫描清楚
  7. 【Pytorch】取反操作符~在Pytorch和python中使用的比较
  8. 数电笔记总结(三)(逻辑门电路)
  9. 如何用maya 渲染论文彩图 (occulusion效果)
  10. 解决电脑不显示桌面图标问题