快捷導(dǎo)航

Flutter 自定義Drawer 滑出位置的大小實(shí)例代碼詳解

更新時(shí)間：2020年04月17日 10:18:54 作者：三掌柜666

這篇文章主要介紹了Flutter 自定義Drawer 滑出位置的大小,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Flutter開(kāi)發(fā)過(guò)程中，Drawer控件的使用頻率也是比較高的，其實(shí)有過(guò)移動(dòng)端開(kāi)發(fā)經(jīng)驗(yàn)的人來(lái)說(shuō)，F(xiàn)lutter中的Drawer控件就相當(dāng)于ios開(kāi)發(fā)或者Android開(kāi)發(fā)中的“抽屜”效果，從側(cè)邊欄滑出導(dǎo)航菜單。對(duì)于Flutter中的Drawer控件的常規(guī)用法就不多介紹，網(wǎng)上大把的教程。

那么本篇博文分享一個(gè)網(wǎng)上教程不多的一個(gè)知識(shí)點(diǎn)，那就是自定義Drawer的滑出位置的大小，自定義Drawer滑出位置就需要修改一個(gè)double的widthPercent屬性，widthPercent一般默認(rèn)值是0.7，然后想要修改widthPercent的默認(rèn)值，或者設(shè)置想要的任何大于0小于1之間的值都可以根據(jù)這個(gè)來(lái)設(shè)置。具體操作如下所示：

1、首先封裝這個(gè)方法（看官可以直接復(fù)制使用）

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、調(diào)用的地方

 @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( //調(diào)用修改Drawer的方法

    widthPercent:0.5, //設(shè)置Drawer滑出位置居屏幕的一半寬度

    child: Container(

     color: Color(0xFF1F1D5B),

     child: Column(

      children: <Widget>[

       Expanded(

        child: ListView(children: <Widget>[

         Column(

          children: <Widget>[

           ListTile(

            title: Text('設(shè)備列表',

              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, '充電樁列表')));

             }),

           ],

         )

        ]),

       )

      ],

     ),

    ),

   ),

  );

 }

實(shí)現(xiàn)效果如下所示：