首页 文章

AppBar下面的Flutter Drawer

提问于
浏览 次
1

我在我的 Flutter 应用中实现了 Drawer .

关闭 Drawer ：

enter image description here

打开 Drawer ：

enter image description here

如您所见， Drawer 位于 Appbar 之上 . 在 Flutter 上启动应用程序之前，我们有一个原生 Android 应用程序，其中 Drawer 过去看起来像这样：

关闭 Drawer ：

enter image description here

打开 Drawer ：

enter image description here

这是我的代码：

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _buildDrawer(context);
  }
}

Widget _buildDrawer(BuildContext context) {
  return new Drawer(
    child: new ListView(
      children: <Widget>[
        _buildDrawerItem(context, EnumDrawerItem.PROJECT_SELECTION, Icons.home, Colors.transparent),
        new Divider(height: 20.0),
        _buildDrawerItem(context, EnumDrawerItem.TASK_LIST, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.GUIDED_TASKS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.PHOTOS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.DOCUMENTS, Icons.home, Colors.transparent),
        new Divider(),
        _buildDrawerItem(context, EnumDrawerItem.LOG_OUT, Icons.home, const Color(0x85bf0202)),
        new Divider(),
      ],
    ),
  );
}

Widget _buildDrawerItem(BuildContext context, EnumDrawerItem drawerItem, IconData iconData, Color color) {
  return  Container(
    color: color,
    child: new Padding(
      padding: new EdgeInsets.all(7.0),
      child: new Row(
        children: <Widget>[
          new Icon(iconData),
          new Container(
            margin: new EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
            child: new Text(
              drawerItem.toString(),
              style: styleDrawerItem,
            ),
          ),
        ],
      ),
    ),
  );
}

我知道这是标准的 Material Design 风格，但客户想要它像以前一样 .

是否有可能像在最后两个截图中那样实现它？你有什么主意吗？

flutter drawer appbar flutter-layout

1 回答

  • 1

    将你的主 Scaffold 包裹在另一个 Scaffold 并使用子 Scaffold 的抽屉也确保将 automaticallyImplyLeading 设置为 false ，这样你就不会在 AppBar 中找回图标

    UPDATE : 我不建议这样做因为issue

    return Scaffold(
      primary: true,
      appBar: AppBar(
        title: Text("Parent Scaffold"),
        automaticallyImplyLeading: false,
      ),
      body: Scaffold(
        drawer: Drawer(),
      ),
    );

    最终结果：

    enter image description here

    回复于

相关问题