常用组件--Drawer

• 先看看如何使用,使用drawer也很简单.

Scaffold(
    drawer: myDrawer(),
    appBar: AppBar(
      title: Text('Home'),
    ),
    body: Center(
      child: Container(
        child: Text('hello world'),),)

• 查看Scaffold的build方法中drawer的初始化方法，可以看到系统是如何创建和使用drawer；
• DrawerController这个组件是控制drawer的出现和消失，但是系统并没有开放打开和关闭的销毁回调方法。如果想要使用该回调则需要自定义drawer。

void _buildDrawer(List 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,
),);}}

• 话不多说先看源码。初始化方法并无新意，使用它主要是围绕child来展开。

const Drawer({
    Key key,
    this.elevation = 16.0,
    this.child,
    this.semanticLabel,
  }) : assert(elevation != null && elevation >= 0.0),
       super(key: key);

• child中一般使用ListView来当做容器、也可以使用Column都是可以的

Drawer(
 elevation: 20,
 child: ListView(   //或者是Column
 //此处设置padding可以避免顶部间隙
    padding: EdgeInsets.zero,
    children: [
      DrawerHeader(//drawer头部展示用控件
        decoration: BoxDecoration(
          color: Colors.tealAccent,
        ),
        child: Center(
            MaterialButton(
              color: Colors.blueAccent,
              child: Text('logout'),
              onPressed: ()=>{
              //手动关闭侧边Drawer控件
                Navigator.pop(context)
              },
            )
       ),
       ListView(),
    ],
 )  
)

• 根据发现drawer顶部的白色阴影非常的丑，根据测试找到了是在ListView中没有设置padding导致的。

List 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地址

传送门:

Flutter-汇总