Flutter 制作一个抽屉菜单
实现
首先我默认大家已经搭建好了 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<Home> {
@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: <Widget>[
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 颜色
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论