Flutter 制作一个抽屉菜单

什么是抽屉菜单呢？

  其实在APP中，抽屉菜单就是当手指在屏幕横向滑动时候，左边屏幕会滑出或者滑入一个View的东西，就像一个抽屉。下面是我在网上找的一个示例图，和现在正跑在我的模拟器上的目标图。

  在Android或者IOS上，要实现这种侧滑抽屉空间，可以使用外部库来达到效果，不过Flutter本身已经给我们提供了 Drawer 这个UI组件，来使你更轻松地达到这个效果。

Drawer及UserAccountsDrawerHeader可用属性

实现

  首先我默认大家已经搭建好了Flutter的环境并已经初步写了一个简单的Widget => Home用于容纳我们的布局

import 'package:coco/components/drawer.dart';
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Coco',debugShowCheckedModeBanner: false,initialRoute: '/',routes: {'/': (context) => HomeIn(),},theme: ThemeData(primarySwatch: Colors.blue,highlightColor: Color.fromRGBO(255, 255, 255, 0.5),splashColor: Colors.white70,accentColor: Color.fromRGBO(178, 222, 225, 1.0),),);}
}class HomeIn extends StatelessWidget {@overrideWidget build(BuildContext context) {return Home();}
}class Home extends StatefulWidget {_HomeState createState() => _HomeState();
}class _HomeState extends State {@overrideWidget build(BuildContext context) {return DefaultTabController(length: 4,child: Scaffold(drawer: DrawerHead() // 抽取控件),);}
}

  在展示的这段代码中，除与抽屉菜单无关的代码博主都已去除，以免影响同学们的阅读，这段代码可以允许运行在你的工程的lib下的main.dart中，但要注意lib文件夹内还有一个components文件夹，其下存在drawer.dart文件（抽取出来的抽屉控件）。

文件结构

...
/android
/ios
/lib/componentsdrawer.dartmain.dart

  main.dart中，保留了注释的地方就是我们抽出来的drawer控件，这里讲个题外话，Flutter的写法和我们前端写UI的方式是两种方法，Flutter本身是一个APP上的开源UI工具包，意思是书写它你需要使用它本身的API控件去写，这会很容易导致嵌套地狱，在Flutter中你经常能够看到向右的金字塔状代码。但是这其实也是Flutter给我们带来的信息：希望你能将你的代码保持足够的细度，这有助于你减少嵌套层数，也可以提醒你及时考虑组件的抽取以及复用，抽取的这方面就不用赘述了，相信大家都有足够的经验与习惯来处理，我们回到正题。

  事实上，在Scaffold中使用了drawer后，里面的内容（或者说Widget）就已经是以一个抽屉控件的形式展示了，大家可以试着只在darwer.dart文件中返回一个Text('jobs')来查看会出现的样子，那么我们接下来要做的只是让这个Widget更加像一个抽屉组件而已。

  为了避免可能冗余的文字描述，关于这一段的注释我已经全部打在了上面，方便大家学习。

drawer.dart

import 'package:flutter/material.dart';class DrawerHead extends StatelessWidget {@overrideWidget build(BuildContext context) {return Drawer( // 重要的Drawer组件child: ListView( // Flutter 可滚动组件padding: EdgeInsets.zero, // padding为0children: [UserAccountsDrawerHeader( // UserAccountsDrawerHeader 可以设置用户头像、用户名、Email 等信息，显示一个符合纸墨设计规范的 drawer header。// 标题accountName: Text('Jobsofferings',style: TextStyle(fontWeight: FontWeight.bold)),// 副标题accountEmail: Text('https://juejin.im/user/5eaee21f5188256da0323bf9'),// EmailscurrentAccountPicture: CircleAvatar(// 使用网络加载图像backgroundImage: NetworkImage('https://images.cnblogs.com/cnblogs_com/JobsOfferings/1363202/o_preview.jpg'),),// 圆角头像decoration: BoxDecoration(color: Colors.yellow[400],image: DecorationImage(image: NetworkImage('http://pic.netbian.com/uploads/allimg/190510/221228-15574975489aa1.jpg'),fit: BoxFit.cover, // 一种图像的布局方式colorFilter: ColorFilter.mode(Colors.grey[400].withOpacity(0.6),BlendMode.hardLight))),//  BoxDecoration 用于制作背景),// ListTile是下方的几个可点按ListListTile(// List标题title: Text('details', textAlign: TextAlign.right),trailing: Icon(Icons.favorite, // Icon种类color: Colors.black12, // Icon颜色size: 22.0, // Icon大小),// 点按时间，这里可以做你想做的事情，如跳转、判断等等// 此处博主只使用了 Navigator.pop(context) 来手动关闭DraweronTap: () => Navigator.pop(context),),ListTile(title: Text('Favorite', textAlign: TextAlign.right),trailing: Icon(Icons.favorite,color: Colors.black12,size: 22.0,),onTap: () => Navigator.pop(context),),ListTile(title: Text('Settings', textAlign: TextAlign.right),trailing: Icon(Icons.favorite,color: Colors.black12,size: 22.0,),onTap: () => Navigator.pop(context),),],),);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！