Flutter学习笔记

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),
                  ),
                ],
              ),

            );//左侧抽屉;
  
  }
}

缺省时可点击导航栏左侧按钮

上一篇下一篇

猜你喜欢

热点阅读