Flutter的抽屉Drawer
2019-10-10 本文已影响0人
王俏
Drawer
抽屉分为左抽屉(drawer)和右侧抽屉(endDrawer)
class DrawerDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Drawer(//抽屉
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('wangqiao',style:TextStyle(fontWeight: FontWeight.bold)),
accountEmail: Text('wangqiao@hotoneaudio.com'),
currentAccountPicture: CircleAvatar(//圆形头像
backgroundImage: NetworkImage('https://resources.ninghao.org/images/wanghao.jpg'),
),
decoration: BoxDecoration(//抽屉头的装饰器
color: Colors.yellow[400],//背景色
image: DecorationImage(
image: NetworkImage('https://resources.ninghao.org/images/childhood-in-a-picture.jpg'),//背景图片
fit: BoxFit.cover,//填充形式
colorFilter: ColorFilter.mode(//颜色的过滤器
Colors.yellow[400].withOpacity(0.6),
BlendMode.hardLight
),
),
),
),
ListTile(
title: Text('Messages',textAlign: TextAlign.right,),
trailing: Icon(Icons.message,color:Colors.black12,size:22.0),
leading: Icon(Icons.menu,color:Colors.black12,size:22.0),
onTap: ()=>Navigator.pop(context),
),
ListTile(
title: Text('Favorite',textAlign: TextAlign.right,),
trailing: Icon(Icons.favorite,color:Colors.black12,size:22.0),
leading: Icon(Icons.search,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),
leading: Icon(Icons.folder,color:Colors.black12,size:22.0),
onTap: ()=>Navigator.pop(context),
),
],
),
);//左侧抽屉;
}
}
缺省时可点击导航栏左侧按钮