Flutter Drawer制作抽屉菜单

请添加图片描述

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: const Text("Drawer Demo"),
        ),
        //内容区域
        body: HomeContent(),
        drawer: Drawer(
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                      //给Drawer加上头布局
                      child: UserAccountsDrawerHeader(
                    //头像
                    currentAccountPicture: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://profile.csdnimg.cn/B/3/3/1_m0_38013946"),
                    ),
                    accountName: Text("GalenWu"),
                    accountEmail: Text("*******@qq.com"),
                    otherAccountsPictures: <Widget>[
                      //其他账号头像
                      CircleAvatar(
                        backgroundImage: NetworkImage(
                            'https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg'),
                      )
                    ],
                    decoration: BoxDecoration(
                        image: DecorationImage(
                      image: NetworkImage(
                          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F04%2F67%2F81%2F66587f16ae593e0.jpg%21%2Ffwfh%2F804x482%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fwatermark%2Ftext%2FOTDorr7orqE%3D%2Ffont%2Fsimkai%2Falign%2Fsoutheast%2Fopacity%2F20%2Fsize%2F50&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639730040&t=d437e738a695ad0c62bfa947eeacdebb'),
                      fit: BoxFit.cover,
                    )),
                  ))
                ],
              ),
              const ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.home, color: Colors.red),
                ),
                title: Text("我的空间"),
                trailing: Icon(Icons.chevron_right),
              ),
              //分割线
              const Divider(),
              const ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.people, color: Colors.blue),
                ),
                title: Text("用户中心"),
                trailing: Icon(Icons.chevron_right),
              ),
              const Divider(),
              const ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.settings, color: Colors.yellow),
                ),
                title: Text("设置中心"),
                trailing: Icon(Icons.chevron_right),
              ),
              const Divider(),
            ],
          ),
        ),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

class HomeContent extends StatelessWidget {
  //自定义方法
  List<Widget> getData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是第$i个列表"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this.getData(),
    );
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值