Futter基础第13篇： 实现Drawer侧边栏、以及侧边栏内容布局

效果图：

Tabs.dart

User.dart

Tabs.dart

项目结构：




main.dart

import 'package:flutter/material.dart';

import 'routes/Routes.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,      //去掉debug图标

      initialRoute: '/',  //初始化的时候加载的路由
//        home: Tabs(),      //将代码全部抽离出去成一个Tabs组件，再抽离成一个初始化路由组件，在上方       initialRoute: '/',
        //配置命名路由
        onGenerateRoute: oonGenerateRoute //将抽离出去的路由传值规范赋值给左边，而不是执行，记住喔！
    );
  }
}

Routes.dart

import '../pages/Tabs.dart';

import 'package:flutter/material.dart';

import '../pages/User.dart';

//配置路由
final  routes={                   //配置命名路由
  '/':(context)=>Tabs(),  //命名路由传值 arguments工具是必须的
  '/user':(context)=>UserPage()
};

//固定写法
var oonGenerateRoute=(RouteSettings settings) {
  // 统一处理
  final String name = settings.name;    //得到命名路由的名字，例如：'/form'
  final Function pageContentBuilder = routes[name];  //得到命名路由的键去获取值，例如：(context)=>FormPage(),
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) => pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route = MaterialPageRoute(
          builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

User.dart 跳转到用户中心代码

import 'package:flutter/material.dart';

class UserPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('用户中心'),
        ),
      );
  }
}

Tabs.dart 侧边栏主要代码

import 'package:flutter/material.dart';
import 'tabs/Category.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget {
  final index;    //用来作为返回根路由时，判断要显示第几个底部导航项的坐标

Tabs({Key key,this.index=0}) : super(key: key);   //可选参数，默认是0

  @override
  _TabsState createState() => _TabsState(this.index); //把当前坐标通过_TabsState构造方法传给_TabsState类
}

class _TabsState extends State<Tabs> {
  int _currentIndex;
  _TabsState(index){    //接收Tabs 类调用时，传过来的参数，赋值给 _currentIndex
    this._currentIndex=index;
  }

  List _pageList = [    //先将所有页面放到List集合内
    HomePage(),
    CategoryPage(),
    SettingPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlutterDemo'),
      ),
      body: this._pageList[this._currentIndex],   //再根据下标获取对应页面设置到body 里
      bottomNavigationBar: BottomNavigationBar(     //自定义底部导航条

          currentIndex: this._currentIndex,   //配置对应的索引值选中
          onTap: (int index){
            setState(() {     //改变状态
              this._currentIndex=index;      //更改选中的Tab坐标
            });
          },
//          iconSize: 45.0,   //Icon的大小，默认在20左右
          fixedColor: Colors.red, //选中的颜色，默认是蓝色
          items:[
            BottomNavigationBarItem(      //设置导航项
                icon:Icon(Icons.home),
                title: Text('首页')
            ),
            BottomNavigationBarItem(      //设置导航项
                icon:Icon(Icons.category),
                title: Text('分类')
            ),
            BottomNavigationBarItem(      //设置导航项
                icon:Icon(Icons.settings),
                title: Text('设置')
            )
          ]
      ),
      drawer: Drawer(               //左侧边栏
        child: Column(
          children: <Widget>[
            Row(                        //这里使用Row和Expanded进行配合是为了，让底部的线水平铺满屏幕
              children: <Widget>[
                Expanded(
                  child:   UserAccountsDrawerHeader(
                    accountName: Text('睿少帅哥'),    //用户名
                    accountEmail: Text('ruishao@qq.com'), //邮箱
                    currentAccountPicture: CircleAvatar(    //设置圆形头像
                      backgroundImage: NetworkImage('https://www.itying.com/images/flutter/3.png'),
                    ),
                    decoration: BoxDecoration(        //设置背景图片
                      image: DecorationImage(
                        image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
                        fit: BoxFit.cover
                      )
                    ),
                    otherAccountsPictures: <Widget>[    //将图片显示在头像右边
                      Image.network('https://www.itying.com/images/flutter/4.png'),
                      Image.network('https://www.itying.com/images/flutter/5.png'),
                    ],
                  )
                )
              ],
            ),
            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(),
          ],
        ),
      ),
      endDrawer: Drawer(            //右侧边栏
        child: Text('右侧侧边栏'),
      ),
    );
  }
}

剩余：Category.dart、Home.dart、Setting.dart 属于与本章无关的代码，但是还是给你们贴出来一起学学，顺便整理成完整Demo，请参考：
Flutter实现TabController定义顶部tab切换，并介绍生命周期函数