Flutter 实现drawers抽屉组件

首页抽屉截图

Scaffold 简介

Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。
提供展示抽屉（drawers，比如：左边栏）、通知（snack bars） 以及 底部按钮（bottom sheets）

Scaffold 主要的属性说明

class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  const Scaffold({
    Key key,
    this.appBar, //横向水平布局，通常显示在顶部（*）
    this.body, // 内容（*）
    this.floatingActionButton, //悬浮按钮，就是上图右下角按钮（*）
    this.floatingActionButtonLocation, //悬浮按钮位置
    //悬浮按钮在[floatingActionButtonLocation]出现/消失动画
    this.floatingActionButtonAnimator, 
    //在底部呈现一组button，显示于[bottomNavigationBar]之上，[body]之下
    this.persistentFooterButtons,
    //一个垂直面板，显示于左侧，初始处于隐藏状态（*）
    this.drawer,
    this.endDrawer,
    //出现于底部的一系列水平按钮（*）
    this.bottomNavigationBar,
    //底部持久化提示框
    this.bottomSheet,
    //内容背景颜色
    this.backgroundColor,
    //弃用，使用[resizeToAvoidBottomInset]
    this.resizeToAvoidBottomPadding,
    //重新计算布局空间大小
    this.resizeToAvoidBottomInset,
    //是否显示到底部，默认为true将显示到顶部状态栏
    this.primary = true,
    //
    this.drawerDragStartBehavior = DragStartBehavior.down,
  }) : assert(primary != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);

首页AppBar

AppBar(
              //背景颜色
              backgroundColor:
                  isDark ? Colours.dark_bg_color : Colours.bg_color,
              //左侧按钮
              leading: IconButton(
                icon: Icon(Icons.menu),
                color: isDark ? Colours.bg_color: Colours.dark_bg_color,
                tooltip: "Navigration",
                onPressed: () => _scaffoldKey.currentState.openDrawer(),
              ),
              //右侧按钮
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.settings),
                  color: isDark ? Colours.bg_color: Colours.dark_bg_color,
                  onPressed: () {
                    NavigatorUtils.push(context, SettingRouter.settingPage);
                  },
                )
              ],
              elevation: 0.0,
            )

最后将个人信息组件

image.png

贴上代码

///个人信息侧滑页面
class DrawerPerson extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    bool isDark = ThemeUtils.isDark(context);
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          Container(
              height: 200,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Row(children: <Widget>[
                    Container(
                        margin: EdgeInsets.all(10),
                        height: 60,
                        width: 60,
                        child: CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://upload.jianshu.io/users/upload_avatars/2268884/df618e28-c6d0-43b6-a7e9-80a7da48d3db.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp"),
                        )),
                    Text(
                      "大队辅导猿",
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.white),
                    ),
                  ]),
                  Center(
                    child: InkWell(
                      //在最外层包裹InkWell组件
                      onTap: () {
                        NavigatorUtils.push(context, LoginRouter.personDetailPage);
                      },
                      child: Container(
                        margin: EdgeInsets.only(right: 15),
                        padding: EdgeInsets.all(6),
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Colours.open_class_button, width: 1),
                            color: Colors.white,
                            borderRadius: BorderRadius.circular((15.0))),
                        child: Text('编辑资料',
                            style: TextStyle(
                                color: Colours.open_class_button,
                                fontSize: 14)),
                      ),
                    ),
                  ),
                ],
              ),
              decoration: BoxDecoration(
//              color: Colours.app_main
                image: DecorationImage(
                  image: AssetImage("assets/images/bg_drawerlayout_head.png"),
                  fit: BoxFit.cover,
                ),
              )),
          ListTile(
            title: Text(
              "安全中心",
              textAlign: TextAlign.left,
            ),
            leading: Icon(
              Icons.description,
              size: 22.0,
            ),
            onTap: () => Navigator.pop(context),
          ),
          ListTile(
            title: Text(
              "课程帮助",
              textAlign: TextAlign.left,
            ),
            leading: Icon(
              Icons.access_alarms,
              size: 22.0,
            ),
            onTap: () => Navigator.pop(context),
          ),
          ListTile(
            title: Text(
              "隐私政策",
              textAlign: TextAlign.left,
            ),
            leading: Icon(
              Icons.people,
              size: 22.0,
            ),
            onTap: () => Navigator.pop(context),
          ),
          ListTile(
            title: Text(
              "意见反馈",
              textAlign: TextAlign.left,
            ),
            leading: Icon(
              Icons.message,
              size: 22.0,
            ),
            onTap: () => Navigator.pop(context),
          )
        ],
      ),
    );
  }
}

GIthub 点我点我