Flutter 在AppBar下面摆动抽屉

我在我的

flatter

应用程序中实现了一个

Drawer

已关闭的

抽屉

：

已打开的

抽屉

：

如您所见，

抽屉

位于

应用程序栏

的顶部。在我在

flatter

上启动应用程序之前，我们有一个原生的

Android

应用程序，它有一个

抽屉

，过去看起来像这样：

已关闭的

抽屉

：

已打开的

抽屉

：

这是我的密码：

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,
            ),
          ),
        ],
      ),
    ),
  );
}

classmydrawer扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回_buildDrawer（上下文）；
}
}
Widget\u buildDrawer（BuildContext上下文）{
归还新抽屉(
子：新列表视图(
儿童：[
_buildDrawerItem（上下文、EnumDrawerItem.PROJECT\u选择、Icons.home、Colors.transparent），
新隔板（高度：20.0），
_buildDrawerItem（上下文、EnumDrawerItem.TASK_列表、Icons.home、Colors.transparent），
新分隔符（），
_buildDrawerItem（上下文、EnumDrawerItem.GUIDED_任务、Icons.home、Colors.transparent），
新分隔符（），
_buildDrawerItem（上下文、EnumDrawerItem.PHOTOS、Icons.home、Colors.transparent），
新分隔符（），
_buildDrawerItem（上下文、EnumDrawerItem.DOCUMENTS、Icons.home、Colors.transparent），
新分隔符（），
_buildDrawerItem（上下文，EnumDrawerItem.LOG_OUT，Icons.home，常量颜色（0x85bf0202）），
新分隔符（），
],
),
);
}
小部件_buildDrawerItem（BuildContext上下文、EnumDrawerItem drawerItem、Iconda Iconda、Color）{
返回容器(
颜色：颜色，
孩子：新的填充物(
填充：新边缘设置。全部（7.0），
孩子：新的一排(
儿童：[
新图标（Iconda），
新容器(
边距：LTRB（10.0,0.0,0.0,0.0）的新边距集，
儿童：新文本(
DroperItem.toString（），
风格：风格，
),
),
],
),
),
);
}

我知道这是标准的

材料设计

风格，但客户希望它与以前一样

---

是否可以像最后两个屏幕截图那样实现它？你有什么想法吗？

将你的主

支架

包装在另一个

支架

中，并使用子

支架的抽屉

，同时确保将

自动嵌入

设置为

假

，这样你就不会在

应用栏中拿回图标

更新： 因为这个原因，我不推荐这种方式

最终结果：

---

在示例中，我在引入scaffold principal how时使用了scaffold中的键和引用

GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

return Scaffold(
  appBar: AppBar(
      title: Text('Draw'),
      leading: IconButton(
          icon: Icon(Icons.dehaze),
          onPressed: () {
            if (_scaffoldKey.currentState.isDrawerOpen == false) {
              _scaffoldKey.currentState.openDrawer();
            } else {
              _scaffoldKey.currentState.openEndDrawer();
            }
          })),
  body: Scaffold(
    key: _scaffoldKey,
    drawer: Drawer(),
    body: Center(
      child: Text('Drawer'),
    ),
  ),
);

GlobalKey\u scaffoldKey=new GlobalKey（）；
返回脚手架(
appBar:appBar(
标题：文本（“绘图”），
领先：IconButton(
图标：图标（Icons.dehaze），
已按下：（）{
如果（_scaffoldKey.currentState.isDrawerOpen==false）{
_scaffoldKey.currentState.openDrawer（）；
}否则{
_scaffoldKey.currentState.openEndDrawer（）；
}
})),
主体：脚手架(
钥匙：_scaffoldKey，
抽屉：抽屉（），
正文：中(
子项：文本（“抽屉”），
),
),
);

试试这个：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var statusBarHeight = MediaQuery.of(context).padding.top;
    var appBarHeight = kToolbarHeight;  //this value comes from constants.dart and equals to 56.0
    return Scaffold(
      drawerScrimColor: Colors.transparent,
      appBar: AppBar(),
      drawer: Container(
        padding: EdgeInsets.only(top: statusBarHeight+ appBarHeight + 1),//adding one pixel for appbar shadow
        width: MediaQuery.of(context).size.width,
        child: Drawer(),//write your drawer code
      ),
      body: AnyBody(), //add your body
      bottomNavigationBar: AnyNavigationBar(), //add your navigation bar
    );
  }
}

---

非常感谢你抽出时间来帮助我。最后一个问题：是否可以将

抽屉

图标保留在

Appbar

中？如您所见，抽屉关闭时有一个

图标，打开时有一个返回箭头。谢谢是的，您可以使用Leading属性在父应用程序栏中根据需要使用图标，正如我在回答中提到的，如果您希望将图标设置为automaticallyImplyLeading到TrueOK，我会尝试一下。谢谢您我非常感谢您的帮助：）我已经删除了
AppBar
中的
automaticallyImplyLeading
属性。现在，当
抽屉
打开时，我看到返回箭头，但当
抽屉
关闭时，没有图标：（您能检查gif吗？尝试使用前导属性提供默认图标
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var statusBarHeight = MediaQuery.of(context).padding.top;
    var appBarHeight = kToolbarHeight;  //this value comes from constants.dart and equals to 56.0
    return Scaffold(
      drawerScrimColor: Colors.transparent,
      appBar: AppBar(),
      drawer: Container(
        padding: EdgeInsets.only(top: statusBarHeight+ appBarHeight + 1),//adding one pixel for appbar shadow
        width: MediaQuery.of(context).size.width,
        child: Drawer(),//write your drawer code
      ),
      body: AnyBody(), //add your body
      bottomNavigationBar: AnyNavigationBar(), //add your navigation bar
    );
  }
}