Flutter--DrawerLayout

最新推荐文章于 2022-02-04 16:35:11 发布

wjxbless

最新推荐文章于 2022-02-04 16:35:11 发布

阅读量198

点赞数

分类专栏： Flutter 文章标签： dart flutter

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39424143/article/details/104770850

版权

Flutter 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

Drawer 侧边栏


drawer: Drawer( 
    child: Text('左侧边栏'), 
),
endDrawer: Drawer( 
child: Text('右侧侧边栏'), 
),

DrawerHeader

drawer: Drawer(
          child: Column(
            children: <Widget>[

              Row(
                children: <Widget>[
                  Expanded(
                    child: DrawerHeader(
                      child: Text("你好flutter"),
                      decoration:BoxDecoration(
                        color: Colors.yellow,
                        image: DecorationImage(
                          image: NetworkImage("https://profile.csdnimg.cn/B/0/A/1_qq_39424143"),
                          fit:BoxFit.cover,
                        )
                        
                      )
                    )
                  )
                ],
              ),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.home)
                ),
                title: Text("我的空间"),
              ),
                Divider(),
               ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.people)
                ),
                title: Text("用户中心"),
              ),
              Divider(),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.settings)
                ),
                title: Text("设置中心"),
              ),
                Divider(),
            ],
          ),

UserAccountsDrawerHeader效果较佳

属性	释义
decoration	设置背景样式
accountName	账户名称
accountEmail	账户邮箱
currentAccountPicture	用户头像
otherAccountsPictures	用来设置当前用户其他账户头像

drawer: Drawer(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
              child: UserAccountsDrawerHeader(
                accountName:Text("wjxbless"),
                accountEmail: Text("xxx@qq.com"),
                currentAccountPicture: CircleAvatar(
                  backgroundImage: NetworkImage("https://profile.csdnimg.cn/B/0/A/1_qq_39424143"),
                ),
                decoration:BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage("http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23269_s.jpg"),
                      fit:BoxFit.cover,
                    )


                ),
              )
          )
        ],
      ),
      ListTile(
        leading: CircleAvatar(
            child: Icon(Icons.home)
        ),
        title: Text("我的空间"),


      ),
      Divider(),
      ListTile(
        leading: CircleAvatar(
            child: Icon(Icons.people)
        ),
        title: Text("用户中心"),
        onTap: (){
          Navigator.of(context).pop();  // 点击后收起抽屉
          Navigator.pushNamed(context, '/user');
        },
      ),
      Divider(),
      ListTile(
        leading: CircleAvatar(
            child: Icon(Icons.settings)
        ),
        title: Text("设置中心"),
      ),
      Divider(),
    ],
  ),
),

在这里插入图片描述