笔录Flutter(十) 侧边栏(Drawer)、UserAccountsDrawerHeader

Flutter练习Demo

Drawer、UserAccountsDrawerHeader常用属性

1. Drawer

 const Drawer({
    Key key,
    this.elevation = 16.0,
    this.child,
    this.semanticLabel,
  }) : assert(elevation != null && elevation >= 0.0),
       super(key: key);

2. UserAccountsDrawerHeader

const UserAccountsDrawerHeader({
    Key key,
    this.decoration,
    this.margin = const EdgeInsets.only(bottom: 8.0),
    this.currentAccountPicture,// 当前账户头像
    this.otherAccountsPictures,//  其他账户头像
    @required this.accountName,// 账户名字
    @required this.accountEmail,// 账户邮箱
    this.onDetailsPressed,
  }) : super(key: key)

使用

效果图：

功能：

1. 只在Home页面有侧边栏
2. 自定义leading图片展示，实现点击展开侧边栏
3. UserAccountsDrawerHeader的使用
4. 点击侧边栏item跳转页面

功能一 Home页面有侧边栏

配置侧边栏：

 drawer: LeftDrawerPage()),
 // 编写一个侧边栏页面

功能二 leading点击打开侧边栏

功能三 UserAccountsDrawerHeader的使用

 UserAccountsDrawerHeader(
              //其他账户头像  会显示右上角
//            otherAccountsPictures: <Widget>[
//              ClipOval(
//                child: Image.asset(
//                  "images/x.jpg",
//                  width: 50,
//                  height: 50,
//                  fit: BoxFit.cover,
//                ),
//              ),
//              ClipOval(
//                child: Image.asset(
//                  "images/s.jpg",
//                  width: 50,
//                  height: 50,
//                  fit: BoxFit.cover,
//                ),
//              ),
//            ],

            currentAccountPicture: Center(//当前账户头像
              //要想控制头像的大小需要用Center包裹
              child: ClipOval(
                child: Image.asset(
                  "images/z.jpg",
                  width: 70,
                  height: 70,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            accountName: Text("Six某人"),
            accountEmail: Text("1828088521@qq.com"),
            decoration: BoxDecoration(
              image: DecorationImage(
              //设置UserAccountsDrawerHeader背景图
                  image: AssetImage("images/hy.jpg"), fit: BoxFit.cover),
            ),
          ),

功能四 点击侧边栏item跳转页面

//点击跳转前先关闭侧边栏
   onTap: () {
        // 跳转之前先把侧边栏关闭掉
        Navigator.of(context).pop();
        Navigator.pushNamed(context, "/routeDrawerItemPage");
      },