flutter开发过程中，drawer控件的使用频率也是比较高的，其实有过移动端开发经验的人来说，flutter中的drawer控件就相当于ios开发或者android开发中的“抽屉”效果，从侧边栏滑出导航菜单。对于flutter中的drawer控件的常规用法就不多介绍，网上大把的教程。
那么本篇博文分享一个网上教程不多的一个知识点，那就是自定义drawer的滑出位置的大小，自定义drawer滑出位置就需要修改一个double的widthpercent属性，widthpercent一般默认值是0.7，然后想要修改widthpercent的默认值，或者设置想要的任何大于0小于1之间的值都可以根据这个来设置。具体操作如下所示：
1、首先封装这个方法（看官可以直接复制使用）
class customdrawer extends statelesswidget { final double elevation; final widget child; final string semanticlabel; final double widthpercent; const customdrawer({ key key, this.elevation = 16.0, this.child, this.semanticlabel, this.widthpercent = 0.7, }) : assert(widthpercent!=null&&widthpercent<1.0&&widthpercent>0.0) ,super(key: key); @override widget build(buildcontext context) { assert(debugcheckhasmateriallocalizations(context)); string label = semanticlabel; switch (defaulttargetplatform) { case targetplatform.ios: label = semanticlabel; break; case targetplatform.android: case targetplatform.fuchsia: label = semanticlabel ?? materiallocalizations.of(context)?.drawerlabel; } final double _width=mediaquery.of(context).size.width*widthpercent; return semantics( scopesroute: true, namesroute: true, explicitchildnodes: true, label: label, child: constrainedbox( constraints: boxconstraints.expand(width: _width), child: material( elevation: elevation, child: child, ), ), ); } }
2、调用的地方
@override widget build(buildcontext context) { return inkwell( ontap: () { navigator.of(context).pop(); navigator.of(context).push(new materialpageroute( builder: (buildcontext context) => new accountmanagerspage(''))); }, child: new customdrawer( //调用修改drawer的方法 widthpercent:0.5, //设置drawer滑出位置居屏幕的一半宽度 child: container( color: color(0xff1f1d5b), child: column( children: <widget>[ expanded( child: listview(children: <widget>[ column( children: <widget>[ listtile( title: text('设备列表', style: textstyle(color: color(0xff8b89ef))), contentpadding: edgeinsets.symmetric( horizontal: 15.0, vertical: 0.0), ), listtile( leading: circleavatar( backgroundimage: new exactassetimage( 'images/menu_lamp_pole.png'), radius: 15.0, ), title: text('灯杆', style: textstyle( color: color(0xffffffff), fontsize: 18.0, )), ontap: () { navigator.of(context).pop(); //navigator.of(context).push(new materialpageroute(builder:(buildcontext context) => new bigscreenpage(0,'灯杆列表'))); navigator.of(context).push(new materialpageroute( builder: (buildcontext context) => new mainpoleview())); }), // divider(), listtile( leading: circleavatar( backgroundimage: new exactassetimage('images/menu_charge.png'), radius: 15.0, ), title: text('充电桩', style: textstyle( color: color(0xffffffff), fontsize: 18.0, )), ontap: () { navigator.of(context).pop(); navigator.of(context).push(new materialpageroute( builder: (buildcontext context) => new bigscreenpage(6, '充电桩列表'))); }), ], ) ]), ) ], ), ), ), ); }
实现效果如下所示：
总结
到此这篇关于flutter 自定义drawer 滑出位置的大小的文章就介绍到这了,更多相关flutter 自定义drawer内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/addevelopment/898357.html