Drawer
Drawer是Android開發(fā)中Material風(fēng)格常用的設(shè)計(jì)是掰，就是我們常說的“抽屜”效果历帚，一個從側(cè)邊欄拉出來的導(dǎo)航面板。
在Flutter使用Material風(fēng)格，最為常用的組件之一就是Scaffold了虫几；Scaffold的drawer屬性是一個Widget類型的組件黑低，從左側(cè)邊欄拉出赘艳，通常就是用一個Drawer對象實(shí)現(xiàn)（Scaffold的endDrawer屬性定義了一個從右側(cè)邊欄拉出的導(dǎo)航面板）；
如果沒有設(shè)置AppBar的leading屬性克握，則當(dāng)使用Drawer的時候會自動顯示一個IconButton來告訴用戶有側(cè)邊欄（在 Android 上通常是顯示為三個橫的圖標(biāo)）蕾管。
Drawer的child屬性定義了其展示的內(nèi)容，通常是用一個 ListView來實(shí)現(xiàn)菩暗，而在ListView最上面通常會有個 DrawerHeader來設(shè)置當(dāng)前用戶的基本信息掰曾，最常用的一個具體的 DrawerHeader 是 UserAccountsDrawerHeader 。
DrawerHeader
通常用于在抽屜中在頂部展示一些基本信息停团；其包含如下屬性：
-
decoration：header區(qū)域的decoration旷坦，通常用來設(shè)置背景顏色或者背景圖片 -
duration和curve：如果decoration發(fā)生了變化，則會使用curve設(shè)置的變化曲線和duration設(shè)置的動畫時間來做一個切換動畫 -
child:Header里面所顯示的內(nèi)容控件 -
padding:Header里面內(nèi)容控件的padding值佑稠，如果child為null秒梅，則這個值無效 -
margin:Header四周的間隙
如果想在DrawerHeader中顯示用戶賬戶信息，比如類似于 Gmail 的 聯(lián)系人頭像舌胶、用戶名捆蜀、Email 等信息，則可以使用 UserAccountsDrawerHeader這個特殊的DrawerHeader辆琅。
UserAccountsDrawerHeader
UserAccountsDrawerHeader可以設(shè)置用戶頭像漱办、用戶名、Email 等信息婉烟，顯示一個符合MD規(guī)范的 drawer header娩井。其常用屬性如下：
-
margin:Header四周的間隙 -
decoration:header區(qū)域的decoration，通常用來設(shè)置背景顏色或者背景圖片 -
currentAccountPicture：用來設(shè)置當(dāng)前用戶的頭像 -
otherAccountsPictures：用來設(shè)置當(dāng)前用戶的其他賬號的頭像(做多顯示三個) -
accountName：當(dāng)前用戶的名字 -
accountEmail：當(dāng)前用戶的 Email -
onDetailsPressed： 當(dāng) accountName 或者 accountEmail 被點(diǎn)擊的時候所觸發(fā)的回調(diào)函數(shù)似袁，可以用來顯示其他額外的信息
DrawerItem
DrawerItem封裝了常用的Drawer菜單Item樣式洞辣，其主要屬性如下：
-
icon:配置菜單項(xiàng)的圖標(biāo)和圖標(biāo)尺寸、顏色 -
child:具體的菜單項(xiàng)內(nèi)容 -
onPressed:當(dāng)點(diǎn)擊菜單項(xiàng)的時候所觸發(fā)的回調(diào)函數(shù) -
selected: 當(dāng)前菜單項(xiàng)是否選中了
我將DrawerItem添加了刪除線昙衅，因?yàn)樵谧钚碌腇lutter中已經(jīng)找不到DrawerItem這個類了扬霜，可以使用ListTiles 和 AboutListTiles作為替代
Sample
class HomeBuilder {
static Widget homeDrawer() {
return new ListView(padding: const EdgeInsets.only(), children: <Widget>[
_drawerHeader(),
new ClipRect(
child: new ListTile(
leading: new CircleAvatar(child: new Text("A")),
title: new Text('Drawer item A'),
onTap: () => {},
),
),
new ListTile(
leading: new CircleAvatar(child: new Text("B")),
title: new Text('Drawer item B'),
subtitle: new Text("Drawer item B subtitle"),
onTap: () => {},
),
new AboutListTile(
icon: new CircleAvatar(child: new Text("Ab")),
child: new Text("About"),
applicationName: "Test",
applicationVersion: "1.0",
applicationIcon: new Image.asset(
"images/ymj_jiayou.gif",
width: 64.0,
height: 64.0,
),
applicationLegalese: "applicationLegalese",
aboutBoxChildren: <Widget>[
new Text("BoxChildren"),
new Text("box child 2")
],
),
]);
}
static Widget _drawerHeader() {
return new UserAccountsDrawerHeader(
// margin: EdgeInsets.zero,
accountName: new Text(
"SuperLuo",
style: HStyle.titleNav(),
),
accountEmail: new Text(
"super_luo@163.com",
style: HStyle.bodyWhite(),
),
currentAccountPicture: new CircleAvatar(
backgroundImage: new AssetImage("images/ymj_jiayou.gif"),
),
onDetailsPressed: () {},
otherAccountsPictures: <Widget>[
new CircleAvatar(
backgroundImage: new AssetImage("images/ymj_shuijiao.gif"),
),
],
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBase.appBar("Home"),
drawer: new Drawer(
child: HomeBuilder.homeDrawer(),
),
);
}
}
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or press Run > Flutter Hot Reload in IntelliJ). Notice that the
// counter didn't reset back to zero; the application is not restarted.
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}
運(yùn)行效果截圖：
點(diǎn)擊About之后：
可以看到Flutter提供的組件封裝的已經(jīng)非常耐用了。
