Flutter：使用抽屉式菜单导航页面答案

【问题标题】：Flutter: Using a drawer menu to navigate pagesFlutter：使用抽屉式菜单导航页面
【发布时间】：2020-04-09 18:52:34
【问题描述】：

我正在使用 Drawer 为用户提供菜单，并且菜单项会打开应用程序的不同页面。但是正在发生的事情是，每个打开的新页面都被加载到前一页的顶部。我需要的是用新请求的页面替换当前页面。

我的 main 启动应用程序为：

void main() {  
  runApp(
    MaterialApp(
      home: MyJobs(),
    ),
  );
}

每个菜单项将新屏幕加载为：

ListTile(
  title: Text('Time Off Requests'),
  leading: Icon(Icons.timer_off, color: Colors.redAccent),
  onTap: () {
    Navigator.of(context).pop();
    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => TimeOffRequests()));
  },
),

我意识到我没有卸载当前页面。但我不知道该怎么做。还是有更好的方法来做到这一点？在更网络化的思维方式中，我想创建一个空白正文，然后在该正文中插入一个页面（可能使用 setState），然后每次请求另一个页面时，都会用请求的页面重绘正文（创建的每个页面作为自定义小部件？）。这是一种可能的方式吗？

感谢您的任何帮助或建议。

保罗

【问题讨论】：

如果您导航到下一页，您是否希望您的导航抽屉保留？那是你想要的吗？你能让你的问题更清楚吗？因为在颤振中，当你使用抽屉时，你不应该在使用 navigator.push() 移动到下一页之前 pop() 当前上下文。但是，如果您想在导航到的每个页面中保留抽屉，那么您需要在每个屏幕/页面中放置抽屉。使其成为一个小部件并在每个页面中调用。把你的问题说清楚。我会帮你的
是的，每一页都有抽屉菜单。我已经将抽屉菜单创建为自定义小部件，并且每个页面都在使用这个小部件。谢谢。

标签： flutter

【解决方案1】：

不要使用Navigator.pop()，然后是Navigator.push()，而是使用Navigator.pushReplacement()，它将用新屏幕替换上一个/当前屏幕。

希望这能回答你的问题。

【讨论】：

感谢两位的建议。我做了 Darshan 建议的改变，效果很好。干杯，伙计们。

【解决方案2】：

据我所知，您想使用带有多个页面的抽屉。这是一种方法。

首先我们创建一个抽屉式菜单项

 //drawer class
    class DrawerItem {
      String title;
      IconData icon;
      IconThemeData iconThemeData;       

 DrawerItem(this.title, this.icon, this.iconThemeData);
}

然后我们如下设置我们的类

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState()
final drawerItem = [
    DrawerItem("0", Icons.home, IconThemeData(color: Colors.black)),
    DrawerItem("1", Icons.card_giftcard,
        IconThemeData(color: Colors.redAccent)),
    DrawerItem("3", Icons.directions_bike,
        IconThemeData(color: Colors.black)),
    DrawerItem("3", Icons.account_balance_wallet,
        IconThemeData(color: Colors.black)),
    DrawerItem("4", Icons.settings, IconThemeData(color: Colors.black)),
    DrawerItem("5", Icons.live_help, IconThemeData(color: Colors.black)),
  ];
...
class _HomeState extends State<Home> {
 int _selectedDrawerIndex = 0;
 _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return ScreenZero();
      case 1:
        return ScreenOne(

        );
      case 2:
        return TwoScreen();
      case 3:
        return new Three();
      case 4:
        return Settings();
      case 5:
        return Help();

      default:
        return new Text("Error");
    }
  }
 _onSelectItem(int index) {
    setState(() => _selectedDrawerIndex = index);
    Navigator.of(context).pop(); // close the drawer
  }

...
 @override
  Widget build(BuildContext context) {
    var drawerOptions = <Widget>[];
    for (var i = 0; i < widget.drawerItem.length; i++) {
      var d = widget.drawerItem[i];
      drawerOptions.add(new ListTile(
        leading: new Icon(d.icon),
        title: new Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    return Scaffold(
      //appbar
      appBar: AppBar(
        elevation: 0.0,
        iconTheme: IconThemeData(color: Colors.white),
        title: Text(widget.drawerItem[_selectedDrawerIndex].title,
            style: TextStyle(color: Colors.white)),
      ),
      drawer: Drawer(Column(children: drawerOptions)
       body: _getDrawerItemWidget(_selectedDrawerIndex),
....

【讨论】：