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

import ‘package:coco/components/drawer.dart’;

import ‘package:flutter/material.dart’;

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget 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 {

@override

Widget build(BuildContext context) {

return Home();

}

}

class Home extends StatefulWidget {

_HomeState createState() => _HomeState();

}

class _HomeState extends State {

@override

Widget build(BuildContext context) {

return DefaultTabController(

length: 4,

child: Scaffold(

drawer: DrawerHead() // 抽取控件

),

);

}

}

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

文件结构

…

/android

/ios

/lib

/components

drawer.dart

main.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 {

@override

Widget build(BuildContext context) {

return Drawer( // 重要的Drawer组件

child: ListView( // Flutter 可滚动组件

padding: EdgeInsets.zero, // padding为0

children: [

UserAccountsDrawerHeader(

// UserAccountsDrawerHeader 可以设置用户头像、用户名、Email 等信息，显示一个符合纸墨设计规范的 drawer header。

// 标题

accountName: Text(‘Jobsofferings’,

style: TextStyle(fontWeight: FontWeight.bold)),

// 副标题

accountEmail: Text(‘https://juejin.im/user/5eaee21f5188256da0323bf9’),

// Emails

currentAccountPicture: 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是下方的几个可点按List

ListTile(

// List标题

title: Text(‘details’, textAlign: TextAlign.right),

trailing: Icon(

Icons.favorite, // Icon种类

color: Colors.black12, // Icon颜色

自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

Icons.favorite, // Icon种类

color: Colors.black12, // Icon颜色

自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…

[外链图片转存中…(img-PHSOTIRF-1714959862190)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！