如何在我的页面中实现抽屉菜单？答案

【问题标题】：How do I implement a Drawer menu in my pages?如何在我的页面中实现抽屉菜单？
【发布时间】：2021-02-11 17:18:56
【问题描述】：

我有一个 'MyDrawer' 的 dart 文件，我想将此抽屉菜单添加到我的仪表板页面。这是我的代码。我不知道为什么它不起作用。

  import 'package:flutter/material.dart';

  class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Drawer(
  child: ListView(
  
  padding: EdgeInsets.zero,
  children: <Widget>[
    DrawerHeader(
      child: Text('Menu drawer'),
      decoration: BoxDecoration(
        color: Colors.red,
      ),
    ),
    ListTile(
      leading: Icon(Icons.home, size: 40,),
      title: Text('First item'),
      subtitle: Text("This is the 1st item"),
      trailing: Icon(Icons.more_vert),
      onTap: () {
      },
    ),
    ListTile(
      title: Text('Second item'),
      onTap: () {
      },
    ),
  ],
),
);}}

我在我的仪表板页面中调用了这个抽屉菜单。是这样的；

  class Dash extends StatefulWidget { ...

  class _DashState extends State<Dash> { ...
  
 @override
 void initState(){ ...

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 drawer: MyDrawer(),
  body: Container(
  ... ),

【问题讨论】：

你必须从你的抽屉类中返回一个 Drawer()。
你的 MyDrawer 在哪里？
它在lib文件夹中，但是dashboard页面和mydrawer页面在不同的文件夹中。
如果我的回答不起作用，请告诉我，我可以进一步尝试了解您的问题
尝试同时粘贴您遇到的错误

标签： flutter dart navigation-drawer drawer

【解决方案1】：

您的抽屉MyDrawer 应该是返回Drawer 的StatelessWidget。

你应该这样做：

class DashboardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: MyDrawer(),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Drawer(
    child: ListView(
      // Important: Remove any padding from the ListView.
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('Menu drawer'),
          decoration: BoxDecoration(
            color: Colors.red,
          ),
        ),
        ListTile(
          leading: Icon(Icons.home, size: 40,),
          title: Text('First item'),
          subtitle: Text("This is the 1st item"),
          trailing: Icon(Icons.more_vert),
          onTap: () {
          },
        ),
        ListTile(
          title: Text('Second item'),
          onTap: () {
          },
        ),
      ],
    ),
  );
 }
}

【讨论】：

我的仪表板页面不同。你写的第一个代码块，是不是我在说的另一页。我的意思是，我应该将仪表板类添加到我的抽屉.dart 中吗？
您可以将它们放在单独的文件中，您只需要导入您正在使用的文件...您可以编辑您的问题以添加更多信息以便我们更好地理解吗？另外，你的 ide 应该给你一个错误提示......在控制台中或者它可能突出显示错误
您的代码似乎没有任何问题...应用程序正在运行吗？您是否将drawermenu.dart 文件正确导入Dash 文件？
一切正常。 Firebase 连接后，我正在实现仪表板页面。我可以编辑我想在仪表板中添加的任何内容。在调试控制台中，没有错误。我真的不明白。顺便说一句，感谢您的帮助
好吧，对不起，我帮不上忙，但这很奇怪。我知道这很明显，但是您知道您必须从左向右滑动（或在 Dash Scaffold 上添加一个 appBar）才能使抽屉正确显示？祝你好运……

【解决方案2】：

我只需要添加一个应用栏。我肯定错过了这些细节。这是更新版本。

    class Dash extends StatefulWidget { ...

    class _DashState extends State<Dash> { ...

    @override
    void initState(){ ...

    @override
    Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(),
     drawer: MyDrawer(),
    body: Container(
    ... ),

【讨论】：