我们看到有些App两边会有隐藏导航栏，那今天我们就来看看这个该如何做。
在Scaffold这个脚手架中，有个drawer这个属性，它就是我们的左边隐藏导航栏。右侧就是endDrawer。我们看下代码:
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigreation',
onPressed: () => debugPrint('Navigreation button is pressed'),
),
title: Text('导航'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: () => debugPrint('Search button is pressed'),
),
IconButton(
icon: Icon(Icons.more_horiz),
tooltip: 'More',
onPressed: () => debugPrint('More button is pressed'),
)
],
bottom: TabBar(
unselectedLabelColor: Colors.green,
indicatorColor: Colors.orange,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 10.0,
tabs: <Widget>[
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: <Widget>[
Icon(Icons.local_florist, size: 128.0, color: Colors.black12),
Icon(Icons.change_history, size: 128.0, color: Colors.black12),
Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
],
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('HEADER'),
decoration: BoxDecoration(
color: Colors.grey[100],
),
),
ListTile(
title: Text('Messages', textAlign: TextAlign.right),
trailing:
Icon(Icons.message, color: Colors.black12, size: 22.0),
),
ListTile(
title: Text('Messages', textAlign: TextAlign.right),
trailing:
Icon(Icons.message, color: Colors.black12, size: 22.0),
),
ListTile(
title: Text('Messages', textAlign: TextAlign.right),
trailing:
Icon(Icons.message, color: Colors.black12, size: 22.0),
),
],
),
)),
);
}
}
上面的代码中我们运用了Drawer这个widget来实现我们的隐藏导航栏功能。
我们通过前面文章介绍的ListView将左侧导航栏划分了几个块。
第一个就是DrawerHeader，它是隐藏导航栏的Hearder组件。BoxDecoration实际上就是定义这一块的背景，代码中将背景颜色设置为灰色。
ListTile 通常用于在 Flutter 中填充 ListView。trailing设置拖尾将在列表的末尾放置一个图像。
drawer.png
我们看下顶部原来有个菜单按钮，如果把appBar里面我们原来自定义的leading去掉，点击按钮时，也会出现我们的隐藏菜单栏。
那我们如何在隐藏菜单栏退出来，返回上个页面呢？
这时我们可以针对ListTile这个widget添加onTap事件，实际就是点击这个widget会触发的事件。
ListTile(
title: Text('Messages', textAlign: TextAlign.right),
trailing:
Icon(Icons.message, color: Colors.black12, size: 22.0),
onTap: () => Navigator.pop(context),
),
Navigator.pop就是返回上个页面的意思。
接下来我们再来看看导航栏上面的Header。 一般来说这里可能会放用户的信息，那我们把原来的代码替换成:
UserAccountsDrawerHeader(
accountName: Text(
'chen.xu',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
accountEmail: Text('chen.xu@gaiaworks.cn'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('http://xxxx'),
),
,
decoration: BoxDecoration(
color: Colors.black12,
image: DecorationImage(
image: NetworkImage(
'http://www.chinadaily.com.cn/hqgj/images/2012fgztdx/attachement/jpg/site1/20120416/001ec95b71aa10f5d57701.jpg'),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.yellow.withOpacity(0.3),
BlendMode.lighten,
),
)),
),
从组件的名字来看，就知道它是用来展示用户信息的。
- CircleAvatar，它是用来展示圆形图片
- NetworkImage 是用来展示网络图片用的小组件。
- BoxDecoration 用来设置一些背景
- fit 是图片的填充样式，BoxFit.cover是完全填充背景
- colorFilter 是滤镜，相当于在图片上面加层颜色
展示效果:
drawerall.png
完整代码:
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
theme: ThemeData(
primarySwatch: Colors.yellow,
highlightColor: Color.fromRGBO(136, 207, 126, 1),
splashColor: Colors.purple),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
// leading: IconButton(
// icon: Icon(Icons.menu),
// tooltip: 'Navigreation',
// onPressed: () => debugPrint('Navigreation button is pressed'),
// ),
title: Text('导航'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: () => debugPrint('Search button is pressed'),
),
IconButton(
icon: Icon(Icons.more_horiz),
tooltip: 'More',
onPressed: () => debugPrint('More button is pressed'),
)
],
bottom: TabBar(
unselectedLabelColor: Colors.green,
indicatorColor: Colors.orange,
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 10.0,
tabs: <Widget>[
Tab(icon: Icon(Icons.local_florist)),
Tab(icon: Icon(Icons.change_history)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: <Widget>[
Icon(Icons.local_florist, size: 128.0, color: Colors.black12),
Icon(Icons.change_history, size: 128.0, color: Colors.black12),
Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
],
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text(
'chen.xu',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
accountEmail: Text('chen.xu@gaiaworks.cn'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('http://xxxxx'),
),
decoration: BoxDecoration(
color: Colors.black12,
image: DecorationImage(
image: NetworkImage(
'http://www.chinadaily.com.cn/hqgj/images/2012fgztdx/attachement/jpg/site1/20120416/001ec95b71aa10f5d57701.jpg'),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.yellow.withOpacity(0.3),
BlendMode.lighten,
),
)),
),
ListTile(
title: Text('Messages', textAlign: TextAlign.right),
trailing:
Icon(Icons.message, color: Colors.black12, size: 22.0),
onTap: () => Navigator.pop(context),
),
ListTile(
title: Text('Favoriate', 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.settings, color: Colors.black12, size: 22.0),
onTap: () => Navigator.pop(context),
),
],
),
)),
);
}
}
