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

Z时代
2024-01-10
分类：IT

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, '充电桩列表')));
             }),
           ],
         )
        ]),
       )
      ],
     ),
    ),
   ),
  );
 }