时间:2021-05-20
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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Java中自定义异常详解及实例代码下面做了归纳总结,欢迎批评指正自定义异常classChushulingExceptionextendsException{pu
AndroidViewPagerIndicator详解及实例代码关于自定义View的属性零碎知识自定义View和自定义属性的知识不再此提及,这里着重说的是属性在
本文实例讲述了Android编程自定义对话框(Dialog)位置及大小的方法。分享给大家供大家参考,具体如下:代码:packageangel.devil;imp
本文实例为大家分享了android自定义view实现圆周运动的具体代码,供大家参考,具体内容如下思想自定义Animation,自己定义半径,相当于原来控件的位置
前言:前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一),Android自定义控件之自定义属性(二),Android自定义控件之自定义组合