14.Flutter学习之路Drawer侧边栏以及侧边栏内容布局

Drawer

参数	描述
child	子组件
elevation
semanticLabel

DrawerHeader

参数	描述
decoration	设置顶部背景颜色
child	配置子元素
padding	内边距
margin	外边距

其使用为

class Tabs extends StatefulWidget{
  final index;

  Tabs({this.index=0});

  @override
  State<StatefulWidget> createState() {
    return _TabsState(index);
  }

}

class _TabsState extends State<Tabs>{
  List<Widget> _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面
  int _bottomIndex=0;

  _TabsState(index){
   _bottomIndex=index;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body:this._page[_bottomIndex],
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 25,

        type: BottomNavigationBarType.fixed,  //配置底部tabs可以有多个按钮
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
         
        ],
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: DrawerHeader( //侧边栏的头部
                      child: Text('你好Flutter'),
                      decoration: BoxDecoration(
//                        color: Colors.red
                        image: DecorationImage(
                          image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
                          fit: BoxFit.cover
                        )
                      ),
                    ),
                  )
                ],
              ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('空间'),
            ),
            Divider(),//一条线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//一条线
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Column(
          children: <Widget>[

            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置中心'),
              onTap: (){		//实现点击进行侧边栏的item进行关闭侧边栏
                Navigator.pop(context);
              },
            ),
            Divider(),//一条线
          ],
        )
      ),
    );
  }
}

UserAccountsDrawerHeader

这是Flutter为我们提供的一个通用的用户heander的组件

属性	描述
decoration	设置顶部背景颜色
accountName	账户名称
accountEmail	账户邮箱
currentaccountPicture	用户头像
otherAccountsPicture	用来设置当前账户其他账户头像
margin	外边距