Question

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

我的主要用户以以下方式启动应用程序：

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），然后每次请求另一个页面时，都使用所请求的页面重绘主体（每个页面均已创建）作为自定义小部件？）。这是一种可行的方法吗？

感谢您的帮助或建议。

保罗

Answer 1

使用ok_or_else()代替map_or_else()，然后使用Navigator.pop()，它将用新的屏幕替换以前的/当前的屏幕。

希望这能回答您的问题。

Answer 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),
....

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

2 个答案: