1. Flutter Drawer 侧边栏
// 在Scaffold组件内,通过传入drawer参数可以定义左侧的边栏,而通过endDrawer则可以定义右侧边栏。
// 默认情况下,侧边栏是隐藏的。可以通过手势滑动或点击按钮来显示。
return Scaffold(
appBar: AppBar(
title: Text("Flutter App"),
),
drawer: Drawer(
child: Text('左侧边栏'),
),
endDrawer: Drawer(
child: Text('右侧侧边栏'),
),
);
2. DrawerHeader 的常见属性
// DrawerHeader组件具有以下常见属性:
// - decoration: 设置顶部背景颜色
// - child: 配置子元素
// - padding: 内边距
// - margin: 外边距
3. Flutter UserAccountsDrawerHeader 的属性
// UserAccountsDrawerHeader是一个特殊的DrawerHeader,具有以下属性:
// - decoration: 设置顶部背景颜色
// - accountName: 显示账户名称
// - accountEmail: 显示账户的电子邮件地址
// - currentAccountPicture: 显示用户的当前头像
// - otherAccountsPictures: 用来显示当前用户的其他账户头像
// - margin: 外边距
4. Flutter 侧边栏路由跳转
// 当点击侧边栏的某一项时,可以使用以下方法进行路由跳转:
onTap: (){
Navigator.of(context).pop();
Navigator.pushNamed(context, '/search');
}
5. 侧边栏案例代码
// 以下是一个完整的侧边栏使用案例,其中包含了UserAccountsDrawerHeader和路由跳转的实现:
import 'package:flutter/material.dart';
import '../home.dart';
class My extends StatelessWidget {
@override
Widget build(BuildContext context) {
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).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => Home(index: 1)),
(route) => route == null
);
},
),
ListTile(
title: Text('123'),
leading: Icon(Icons.home),
onTap: () {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => Home(index: 2)),
(route) => route == null
);
},
),
],
),
),
endDrawer: Drawer(
child: Text('右侧'),
),
);
}
}