Drawer实现侧边栏布局

时间 2019-12-11

标签 drawer 实现侧边栏布局繁體版

原文原文链接

在 Scaffold 组件里面传入 drawer 参数能够定义左侧边栏，传入 endDrawer 能够定义右侧边栏。侧边栏默认是隐藏的，咱们能够经过手指滑动显示侧边栏，也能够经过点击按钮显示侧边栏。

咱们仍是在前面TabBar项目的基础上实现侧边栏。

为了能在底部TabBar的三个页面都实现侧边栏效果，这里将侧边栏加在Tabs.dart页面中。

只须要在

BottomNavigationBar下面继续添加drawer属性就能够了。

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

class Tabs extends StatefulWidget {
   final index;
  Tabs({Key key,this.index=0}) : super(key: key);

  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {

  // int _currentIndex=0;
   int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   
          onTap: (int index){
              setState(() {  
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //选中的颜色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs能够有多个按钮
          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:Text('这里是测边栏')
        ),
      );
  }
}

此时在顶部会出现一个可点击的图标按钮，无论是点击这个按钮仍是滑动屏幕，都会出现侧边栏：app

若是要实现右边的侧边栏，只须要使用endDrawer就能够了：less

上面的样式太丑了，因此，能够稍微调整一下了：ide

如今，虽然侧边栏里面多了一下内容，可是顶部仍是出现了遮盖的现象，所以，能够借助DrawerHeader 组件来设置一下侧边栏顶部的样式。布局

DrawerHeader

在flutter中，DrawerHeader 有如下一些经常使用的属性：动画

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

如今，借助了DrawerHeader实现了侧边栏的头部样式，除此以外，还能够借助UserAccountsDrawerHeader实现侧边栏头部的布局。ui

UserAccountsDrawerHeader

在flutter中，UserAccountsDrawerHeader有如下一些经常使用的属性：this

decoration ：设置顶部背景颜色
accountName：帐户名称
accountEmail ：帐户邮箱
currentAccountPicture ：用户头像
otherAccountsPictures ：用来设置当前帐户其余帐户头像
margin ：

侧边栏中的路由跳转

要实现路由跳转，首先须要有供跳转的页面：spa

User.dart3d

import 'package:flutter/material.dart';

class UserPage extends StatelessWidget {
  const UserPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("用户中心"),
      ),
    );
  }
}

而后配置路由：code

最后，在用户中心处添加路由跳转按钮就能够了。可是有一个问题：在侧边栏进行路由跳转，那么侧边栏是开启的，这样，页面跳转后再返回，侧边栏仍是存在的，而且动画上面还会出现不流畅性，所以，在路由跳转前，须要先隐藏侧边栏：

Tabs.dart

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

class Tabs extends StatefulWidget {
  // Tabs({Key key}) : super(key: key);
  // _TabsState createState() => _TabsState();
   final index;
  Tabs({Key key,this.index=0}) : super(key: key);

  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {

  // int _currentIndex=0;
   int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置对应的索引值选中
          onTap: (int index){
              setState(() {  //改变状态
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //选中的颜色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs能够有多个按钮
          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(
                children: <Widget>[
                  Expanded(
                    // child: DrawerHeader(
                    //   child: Text('你好'),
                    //   decoration: BoxDecoration(
                    //     color:Colors.yellow,
                    //     image: DecorationImage(
                    //       image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3230740943,2194698121&fm=27&gp=0.jpg"),
                    //       fit:BoxFit.cover,
                    //     ),
                    //   ),
                    // ),
                    child:UserAccountsDrawerHeader(
                      currentAccountPicture: CircleAvatar(
                        backgroundImage: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1547205045,3791549413&fm=27&gp=0.jpg"),
                      ),
                      accountName: Text('侧边栏'),
                      accountEmail: Text('12345678@qq.com'),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3230740943,2194698121&fm=27&gp=0.jpg"),
                          fit:BoxFit.cover,
                        )
                      ),
                    ),
                  ),
                ],
              ),
              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('设置中心')
              ),
            ],
          )
        ),
      );
  }
}

代码下载：点这里（提取码：ukur）