Flutter Drawer 侧边栏、以及侧边栏内 容布局

一、Flutter Drawer 侧边栏

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

return Scaffold(
      appBar: AppBar(
          title: Text("Flutter App"), ),
          drawer: Drawer(
            child: Text('左侧边栏'),
            ),
          endDrawer: Drawer(
            child: Text('右侧侧边栏'),
           ), 
);

二、Flutter DrawerHeader

常见属性：

 

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

 

 

 

 

 

 

 

 

drawer: Drawer(
    child: Column(
      children: <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.yellow,
            image:DecorationImage(
              image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
              fit:BoxFit.cover )
            ),
            child: ListView(
              children: <Widget>[
                Text('我是一个头部')
              ],
            ),
          ),
          ListTile(
            title: Text("个人中心"),
            leading: CircleAvatar(
              child: Icon(Icons.people) ),
            ),
            Divider(),
            ListTile(
              title: Text("系统设置"),
              leading: CircleAvatar(
                child: Icon(Icons.settings)
              ),
            )
        ],
      )
)

三、Flutter UserAccountsDrawerHeader

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

 

 

 

 

 

 

 

 

 

 

 

 

 

drawer: Drawer(
  child: Column(
      children: <Widget>[
      UserAccountsDrawerHeader(
        accountName:Text("大地老师") ,
        accountEmail:Text("dadi@itying.com") ,
        currentAccountPicture: CircleAvatar(
        backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
      ),
      decoration: BoxDecoration(
        color: Colors.yellow,
        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"),
        Image.network("https://www.itying.com/images/flutter/6.png")
        ],
      ),
      
      ListTile(
        title: Text("个人中心"),
        leading: CircleAvatar(
          child: Icon(Icons.people) 
        ),
      ),
      Divider(),
      ListTile( 
        title: Text("系统设置"),
        leading: CircleAvatar(
        child: Icon(Icons.settings)
         ),
      )
    ],


  ) 
) 

四、Flutter 侧边栏路由跳转

onTap: (){
  Navigator.of(context).pop(); 
  Navigator.pushNamed(context, '/search');
}