Flutter 自定义Drawer 滑出位置的大小实例代码详解

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter 自定义Drawer 滑出位置的大小实例代码详解

    Flutter开发过程中,Drawer控件的使用频率也是比较高的,其实有过移动端开发经验的人来说,Flutter中的Drawer控件就相当于ios开发或者Android开发中的"抽屉"效果,从侧边栏滑出导航菜单.对于Flutter中的Drawer控件的常规用法就不多介绍,网上大把的教程. 那么本篇博文分享一个网上教程不多的一个知识点,那就是自定义Drawer的滑出位置的大小,自定义Drawer滑出位置就需要修改一个double的widthPercent属性,widthPercent一般

  • js实现弹出框的拖拽效果实例代码详解

    具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&

  • Android自定义指示器时间轴效果实例代码详解

    指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属

  • Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解

    首先声明本文是基于GitHub上"baoyongzhang"的SwipeMenuListView修改而来,该项目地址: https://github.com/baoyongzhang/SwipeMenuListView 可以说这个侧滑删除效果是我见过效果最好且比较灵活的项目,没有之一!!! 但是在使用它之前需要给大家提两点注意事项: 1,该项目支持Gradle dependence,但是目前作者提供的依赖地址对应的项目不是最新的项目,依赖过后的代码与demo中使用的不一致,会提示没有B

  • 使用Flutter开发的抖音国际版实例代码详解

    简介 最近花了两天时间研究使用Flutter开发一个抖音国际版. 个人感觉使用Flutter开发app快得不要不要的额. 两天就基本可以开发个大概出来. 最主要是热重载,太方便实时调整UI布局了. 相应速度极快. 如下图: 主要项目架构 详细说明一下,开发主要在lib文件夹 pubspec.yaml是配置插件的位置,如http: ^0.12.0+4,类似依赖组件. common文件夹存放的是重写的网络组件,以及图标组件icons.dart config文件夹存放的api.dart,wei调用的a

  • jQuery鼠标滑过横向时间轴样式(代码详解)

    每日分享效果,今天分享内容为:jQuery鼠标滑过横向时间轴样式 效果图: HTML代码: `<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div

  • jquery实现像栅栏一样左右滑出式二级菜单效果代码

    本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht

  • 微信小程序自定义纯净模态框(弹出框)的实例代码

    由于官方API提供的模态框只能显示简单的文字,但是在实际应用场景中,我们需要模态框上能够显示各种各样的组件和样式,所以,以此为基础模拟出一套可以供大家自定义的纯净版的模态框,满足大家各式各样的需求. 效果图: WXML: <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"

  • C语言中的自定义类型之结构体与枚举和联合详解

    目录 1.结构体 1.1结构的基础知识 1.2结构的声明 1.3特殊的声明 1.4结构的自引用 1.5结构体变量的定义和初始化 1.6结构体内存对齐 1.7修改默认对齐数 1.8结构体传参 2.位段 2.1什么是位段 2.2位段的内存分配 2.3位段的跨平台问题 2.4位段的应用 3.枚举 3.1枚举类型的定义 3.2枚举的优点 3.3枚举的使用 4.联合 4.1联合类型的定义 4.2联合的特点 4.3联合大小的计算 1.结构体 1.1结构的基础知识 结构是一些值的集合,这些值称为成员变量.结构

  • C语言自定义数据类型的结构体、枚举和联合详解

    结构体基础知识 首先结构体的出现是因为我们使用C语言的基本类型无法满足我们的需求,比如我们要描述一本书,就需要书名,作者,价格,出版社等等一系列的属性,无疑C语言的基本数据类型无法解决,所以就出现了最重要的自定义数据类型,结构体. 首先我们创建一个书的结构体类型来认识一下 struct Book { char name[20]; char author[20]; int price; }; 首先是struct是结构体关键字,用来告诉编译器你这里声明的是一个结构体类型而不是其他的东西,然后是Boo

随机推荐