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

一、Flutter Drawer 侧边栏

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

return Scaffold(

appBar: AppBar(

title: Text("Flutter App"),

drawer: Drawer(

child: Text('左侧边栏'),

endDrawer: Drawer(

child: Text('右侧侧边栏'),

);

二、DrawerHeader

常见属性：

decoration 设置顶部背景颜色

child 配置子元素

padding 内边距

margin 外边距

三、Flutter UserAccountsDrawerHeader

decoration 设置顶部背景颜色

accountName 账户名称

accountEmail 账户邮箱

currentAccountPicture 用户头像

otherAccountsPictures 用来设置当前账户其他账户头像

margin

四、Flutter 侧边栏路由跳转

onTap: (){

Navigator.of(context).pop();

Navigator.pushNamed(context, '/search');

}

案例代码

import 'package:flutter/material.dart';
import '../home.dart';

class My extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              decoration: BoxDecoration(
                  image:DecorationImage( image: NetworkImage("https://www.itying.com/images/flutter/2.png"), fit:BoxFit.cover )
              ),
            ),
            ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
//              Navigator.of(context).pop();
//              Navigator.pushNamed(context, '/search');
              Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 1)), (route) => route == null);
            },),
            ListTile(title: Text('123'),leading: Icon(Icons.home), onTap: () {
//              Navigator.of(context).pop();
//              Navigator.pushNamed(context, '/search');
              Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => Home(index: 2)), (route) => route == null);
            }),

          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text('右侧'),
      ),
    );
  }
}

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

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