Flutter-Drawer

drawer是Scaffold一个子属性

drawer: Container(
  color: Colors.white,
  padding: EdgeInsets.all(8),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('This is drawer')
    ],
  ),
),

drawer

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
        child: Text('header'.toUpperCase()),
        decoration: BoxDecoration(
          color: Colors.grey[100]
        ),
      ),
      ListTile(
        title: Text('Messages', textAlign: TextAlign.right,),
        trailing: Icon(Icons.message, color: Colors.black12, size: 22,),
      ),
      ListTile(
        title: Text('Favorite', textAlign: TextAlign.right,),
        trailing: Icon(Icons.favorite, color: Colors.black12, size: 22,),
      ),
      ListTile(
        title: Text('Setting', textAlign: TextAlign.right,),
        trailing: Icon(Icons.settings, color: Colors.black12, size: 22,),
      ),
    ],
  ),
)

image.png

class DrawerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          // 如果未指定leading，Drawer属性将会自动添加Icons.menu这个图标
          centerTitle: true,
          title: Text('NINGHAO'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              tooltip: 'Search',
              onPressed: ()=>{
                debugPrint('Search button is pressed'),
              },
            ),
            IconButton(
              icon: Icon(Icons.more_horiz),
              tooltip: 'Navigration_horizal',
              onPressed: ()=>{
                debugPrint('more_horiz button is pressed'),
              },
            ),
          ],
          bottom: TabBar(
            unselectedLabelColor: Colors.black38, // 标签栏中未选择的图标颜色
            indicatorColor: Colors.black54, // 标签栏中选中的线（指示器）的颜色
            indicatorSize: TabBarIndicatorSize.label, // 线的长度
            indicatorWeight: 1.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, color: Colors.black12,),
            Icon(Icons.change_history, size: 128, color: Colors.black12,),
            Icon(Icons.directions_bike, size: 128, color: Colors.black12,)
          ],
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('header'.toUpperCase()),
                decoration: BoxDecoration(
                  color: Colors.grey[100]
                ),
              ),
              ListTile(
                title: Text('Messages', textAlign: TextAlign.right,),
                trailing: Icon(Icons.message, color: Colors.black12, size: 22,),
              ),
              ListTile(
                title: Text('Favorite', textAlign: TextAlign.right,),
                trailing: Icon(Icons.favorite, color: Colors.black12, size: 22,),
              ),
              ListTile(
                title: Text('Setting', textAlign: TextAlign.right,),
                trailing: Icon(Icons.settings, color: Colors.black12, size: 22,),
              ),
              ListTile(
                title: Text('exit', textAlign: TextAlign.right,),
                trailing: Icon(Icons.exit_to_app, color: Colors.black12, size: 22,),
                // 点击该列表项关闭抽屉
                onTap: ()=> Navigator.pop(context),
              )
            ],
          ),
        )
      ),
    );
  }
}

界面样式
抽屉打开

UserAccountsDrawerHeader

如果要显示抽屉里的用户账号信息，我们可以将DrawerHeader替换为UserAccountsDrawerHeader，代码如下所示：

UserAccountsDrawerHeader(
  accountName: Text('wanghao', style: TextStyle(fontWeight: FontWeight.bold),),
  accountEmail: Text('wanghao@ninghao.net'),
  currentAccountPicture: CircleAvatar(
    backgroundImage: AssetImage('resources/images/profilePhoto.jpg'),
  ),
),

设置用户账号信息

设置UserAccountsDrawerHeader的背景样式

UserAccountsDrawerHeader(
  accountName: Text('wanghao', style: TextStyle(fontWeight: FontWeight.bold),),
  accountEmail: Text('wanghao@ninghao.net'),
  currentAccountPicture: CircleAvatar(
    backgroundImage: AssetImage('resources/images/profilePhoto.jpg'),
  ),
  decoration: BoxDecoration(
    color: Colors.yellow[400], // 如果没有背景图像没有填满的话，背景颜色才会显露
    image: DecorationImage(
      image: NetworkImage('https://resources.ninghao.org/images/candy-shop.jpg'),
      fit: BoxFit.cover, // 
      colorFilter: ColorFilter.mode( // 混合模式，相当于遮罩层
        Colors.blue[400].withOpacity(0.6), // 将遮罩层的透明度设为0.6
        BlendMode.hardLight
      )
    )
  ),
),

设置用户信息的背景样式