Scaffold(
drawer: myDrawer(),
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Container(
child: Text('hello world'),),)
void _buildDrawer(List<LayoutId> children, TextDirection textDirection) {
if (widget.drawer != null) {
assert(hasDrawer);
_addIfNonNull(
children,
DrawerController(
key: _drawerKey,
alignment: DrawerAlignment.start,
child: widget.drawer,
drawerCallback: _drawerOpenedCallback,
dragStartBehavior: widget.drawerDragStartBehavior,
),);}}
const Drawer({
Key key,
this.elevation = 16.0,
this.child,
this.semanticLabel,
}) : assert(elevation != null && elevation >= 0.0),
super(key: key);
Drawer(
elevation: 20,
child: ListView( //或者是Column
//此处设置padding可以避免顶部间隙
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(//drawer头部展示用控件
decoration: BoxDecoration(
color: Colors.tealAccent,
),
child: Center(
MaterialButton(
color: Colors.blueAccent,
child: Text('logout'),
onPressed: ()=>{
//手动关闭侧边Drawer控件
Navigator.pop(context)
},
)
),
ListView(),
],
)
)
List<Widget> buildSlivers(BuildContext context) {
...
if (padding == null) { //如果不设置padding系统则会自己根据手机方向来预设一个sliver,也就是这个sliver导致那个非常丑的间隙
final MediaQueryData mediaQuery = MediaQuery.of(context, nullOk: true);
if (mediaQuery != null) {
final EdgeInsets mediaQueryHorizontalPadding =
mediaQuery.padding.copyWith(top: 0.0, bottom: 0.0);
final EdgeInsets mediaQueryVerticalPadding =
mediaQuery.padding.copyWith(left: 0.0, right: 0.0);
effectivePadding = scrollDirection == Axis.vertical
? mediaQueryVerticalPadding
: mediaQueryHorizontalPadding;
sliver = MediaQuery(
data: mediaQuery.copyWith(
padding: scrollDirection == Axis.vertical
? mediaQueryHorizontalPadding
: mediaQueryVerticalPadding,
),
child: sliver,
);
}
...
}
前后区别
截图_d44b7036-2e52-41f4-a663-7c72564f4f50.png
截图_761560bd-37b3-4440-b83b-197d518099c1.png
自定义Drawer可以去Git下载我的demo查看。 我的Git地址