Flutter 18 - Drawer 组件详解

一、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	外边距

drawer: Drawer(
    child: Column(
        children: [
            DrawerHeader(
                decoration: BoxDecoration(
                    color: Colors.yellow,
                    image:DecorationImage(
                        image: NetworkImage("https://upload.jianshu.io/users/upload_avatars/8863827/0979f538-d3e0-4e8c-8a10-23d66837ea0f.jpeg"),
                        fit:BoxFit.cover
                    )
                ),
                child: ListView(
                    children: [ 
                        Text('我是一个头部')
                    ]
                )
            ), 
            ListTile(
                title: Text("个人中心"),
                leading: CircleAvatar(
                    child: Icon(Icons.people)
                ),
            ),
            Divider(),
            ListTile(
                title: Text("系统设置"), 
                leading: CircleAvatar(
                    child: Icon(Icons.settings)
                ),
            )
        ],
    )
)

三、UserAccountsDrawerHeader 组件

常见属性

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

drawer: Drawer(
    child: Column(
        children: [
            UserAccountsDrawerHeader( 
                accountName:Text("一叶知秋"),
                accountEmail:Text("[email protected]"),
                currentAccountPicture: CircleAvatar(
                    backgroundImage:  NetworkImage("https://upload.jianshu.io/users/upload_avatars/8863827/0979f538-d3e0-4e8c-8a10-23d66837ea0f.jpeg")
                    ),
                decoration: BoxDecoration(
                    color: Colors.yellow,
                    image:DecorationImage(
                        image: NetworkImage("https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"),
                        fit:BoxFit.cover
                    )
                ),
                otherAccountsPictures: [
                    Image.network("https://upload-images.jianshu.io/upload_images/8863827-6f3e06b72ac3f406.png"),
                    Image.network("https://upload-images.jianshu.io/upload_images/8863827-2e006a5894bbab1c.png"),
                    Image.network("https://upload-images.jianshu.io/upload_images/8863827-7bd40d0269c75a40.png") 
                ]
            ), 
            ListTile(
                title: Text("个人中心"),
                leading: CircleAvatar(
                    child: Icon(Icons.people)
                )
            ), 
            Divider(),
            ListTile(
                title: Text("系统设置"),
                leading: CircleAvatar(
                    child: Icon(Icons.settings) 
                )
            )
        ],
    )
)

四、侧边栏路由跳转

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