Flutter Drawer侧边栏,DrawerHeader以及UserAccountsDrawerHeader

最新推荐文章于 2025-03-10 20:41:08 发布

神也会困

最新推荐文章于 2025-03-10 20:41:08 发布

阅读量435

点赞数 1

分类专栏： Flutter 文章标签： Flutter Drawer DrawerHeader

本文链接：https://blog.csdn.net/qq_42572245/article/details/106714383

版权

Flutter 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何使用Flutter创建美观且功能丰富的侧边栏，包括DrawerHeader和UserAccountsDrawerHeader组件的使用，以及如何实现侧边栏的路由跳转。通过具体的代码示例，展示了如何设置头部背景、用户账户信息、列表项和点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

DrawerHeader

在这里插入图片描述

import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DrawerDemo'),
      ),
      body: Center(
        child: Text('data'),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: DrawerHeader(
                    child: Text('Hello World'),
                    decoration: BoxDecoration(//头部颜色或者图片
                      //color: Colors.amber
                      image: DecorationImage(
                        image: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/e8d0b0ab35b14b33a499d74cbc52b43c.jpeg'),
                        fit: BoxFit.cover
                      ),
                    ),
                  ),
                )
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('我的空间'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('附近的人'),
            ),
            Divider(),//横线
          ],
        ),
      )
    );
  }
}

UserAccountsDrawerHeader

在这里插入图片描述

import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DrawerDemo'),
      ),
      body: Center(
        child: Text('data'),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: UserAccountsDrawerHeader(
                    accountName: Text('GodKun',style: TextStyle(color: Colors.white)),
                    accountEmail: Text('173@qq.com',style: TextStyle(color: Colors.white)),
                    currentAccountPicture: CircleAvatar(//圆形图片
                      backgroundImage: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/ba1b73bec9784b9eae4416226abcddc7.jpeg'), //头像
                    ),
                    decoration: BoxDecoration(//顶部背景颜色或者图片
                      //color: Colors.amber
                      image: DecorationImage(
                          image: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/e8d0b0ab35b14b33a499d74cbc52b43c.jpeg'),
                          fit: BoxFit.cover
                      ),
                    ),
                    otherAccountsPictures: <Widget>[//当前用户其他账号的头像
                      //http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg
                      Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/fb469ca492a146fd8476fb144cd11f2c.jpeg'),
                      Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg'),
                      Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg'),
                    ],
                  )
                )
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.add_photo_alternate),
              ),
              title: Text('我的空间'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.account_box),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('附近的人'),
            ),
            Divider(),//横线
          ],
        ),
      )
    );
  }
}

侧边栏路由跳转

            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.add_photo_alternate),
              ),
              title: Text('我的空间'),
              onTap: (){
                Navigator.of(context).pop();//加上这句代码，返回时会自动隐藏侧边栏
                Navigator.pushNamed(context, '/Search');
              },
            ),