526互联

22、Scaffold属性 抽屉菜单Drawer

发布时间 2023-11-30 18:59:12作者: 鲤斌
在Scaffold组件里面传入drawer参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏。侧边栏默
认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。
  
class MyFlutterApp extends StatelessWidget {
  const MyFlutterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter App")),
      drawer: const Drawer(
        child: Text("左侧侧边栏"),
      ),
      endDrawer: const Drawer(
         child: Text("左侧侧边栏"),
      ),
    );
  }
}

 

 

Flutter DrawerHeader

常见属性：

 

class MyFlutterApp extends StatelessWidget {
  const MyFlutterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter App")),
      drawer: const Drawer(
          child: Column(
        children: [
          Row(
            children: [
              Expanded(
                flex: 1,
                child: DrawerHeader(
                  decoration: BoxDecoration(  //头部
                      color: Colors.red, //背景颜色
                      image: DecorationImage(
                          image: NetworkImage("https://www.itying.com/images/flutter/3.png"), 
                           fit: BoxFit.cover) //背景图片(不是圆形)
                      ),
                  child: Text("头部")
                ),
              )
            ],
          ),

          //  SizedBox(height: 60,), //顶部间距
          // DrawerHeader(
          //   decoration: BoxDecoration(
          //     color: Colors.red //背景颜色
          //   ),
          //   child: Text("头部"),
          // ),
          ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.people),
            ),
            title: Text("个人中心"),
          ),
          ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.toll),
            ),
            title: Text("设置"),
          )
        ],
      )),
      endDrawer: const Drawer(
        child: Text("右侧侧边栏"),
      ),
    );
  }
}

自定义头像
//头像需要自己去定义
class MyFlutterApp extends StatelessWidget {
  const MyFlutterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter App")),
      drawer: const Drawer(
          child: Column(
        children: [
          Row(
            children: [
              Expanded(
                flex: 1,
                child: DrawerHeader(
                  //头部
                  decoration: BoxDecoration(
                      color: Colors.red, //背景颜色
                      image: DecorationImage(
                          image: NetworkImage(
                              "https://www.itying.com/images/flutter/3.png"),
                          fit: BoxFit.cover) //背景图片(不是圆形)
                      ),
                  child: Column(
                    children: [
                      ListTile(
                        leading: CircleAvatar(
                          backgroundImage: NetworkImage(
                            "https://www.itying.com/images/flutter/3.png",
                          ), //图片(圆形)
                          // child: Image.network("https://www.itying.com/images/flutter/3.png"),图片(不是圆形)
                        ),
                        title: Text("个人中心"),
                      ),
                      ListTile(
                        title: Text("邮箱: 111111111@qq.com"),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),

          //  SizedBox(height: 60,), //顶部间距
          // DrawerHeader(
          //   decoration: BoxDecoration(
          //     color: Colors.red //背景颜色
          //   ),
          //   child: Text("头部"),
          // ),
          ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.people),
            ),
            title: Text("个人中心"),
          ),
          ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.toll),
            ),
            title: Text("设置"),
          )
        ],
      )),
      endDrawer: const Drawer(
        child: Text("右侧侧边栏"),
      ),
    );
  }
}

Flutter UserAccountsDrawerHeader

常见属性：

 

class MyFlutterApp extends StatelessWidget {
  const MyFlutterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
      appBar: AppBar(title: Text("Flutter App")),
      drawer: Drawer(
        width: 500, // 设置自定义宽度
          child: Column(
        children: [
          Row(
            children: [
              Expanded(
                flex: 1,
                child: UserAccountsDrawerHeader(
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                    image: NetworkImage(
                        "https://www.itying.com/images/flutter/3.png"),
                    fit: BoxFit.cover,
                  ) //背景图片
                      ),
                  currentAccountPicture: const CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://www.itying.com/images/flutter/3.png"), //用户头像
                  ),
                  otherAccountsPictures: [  //他账户头像(图片)
                    //
                    Image.network(
                        "https://www.itying.com/images/flutter/3.png"),
                    Image.network(
                        "https://www.itying.com/images/flutter/3.png"),                        
                    Image.network(
                        "https://www.itying.com/images/flutter/3.png"),
                  ],
                  accountName: Text("张三"),
                  accountEmail: Text("11111111@qq.com"),
                ),
              )
            ],
          ),
          const ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.people),
            ),
            title: Text("个人中心"),
          ),
          const ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.toll),
            ),
            title: Text("设置"),
          )
        ],
      )),
      endDrawer: const Drawer(
        child: Text("右侧侧边栏"),
      ),
    );
  }
}