Flutter 使用默认的 Material Drawer 导航到页面答案

【问题标题】：Flutter navigate to page with default Material DrawerFlutter 使用默认的 Material Drawer 导航到页面
【发布时间】：2020-03-26 18:58:50
【问题描述】：

使用默认的 Material Drawer 导航到 Flutter 页面的最佳原因是什么。我仍在学习如何使用 Flutter。

在 Android 中，我们曾经导航到片段页面，但在 Flutter 中这是如何工作的？

我只是想了解如何在不使用 bloc 的情况下导航到抽屉项目。

class MdDrawer extends StatelessWidget {
  final String title;

  MdDrawer({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('MyPage'),
      ),
      drawer: Drawer(

        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[

            UserAccountsDrawerHeader(
              accountName: const Text(_AccountName),
              accountEmail: const Text(_AccountEmail),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.brown,
                child: Text(_AccountAbbr),
              ),
            ),

            ListTile(
              leading: Icon(Icons.lightbulb_outline),
              title: Text('Notes'),
              onTap: () => _alertOnListTileTap(context),
            ),

            Divider(),

            ...

          ],
        ),
      ),
    );
  }

  _alertOnListTileTap(BuildContext context) {
    Navigator.of(context).pop();
    showDialog(
      context: context,
      child: AlertDialog(
        title: const Text('Not Implemented'),
        actions: <Widget>[
          FlatButton(
            child: const Text('OK'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

你试过Navigator.push(context, MaterialPageRoute(builder: (context) => ExampleWidget()));吗？
感谢您的提示 - 我会仔细看看

标签： android iphone flutter dart

【解决方案1】：

在不使用 bloc 的情况下执行此操作会使您的代码在扩展时难以管理，除非您只需要一个没有任何业务逻辑的应用原型。

尽管如此，您可以按照以下方式在不使用 bloc 的情况下进行操作；

将所有屏幕放在body: 中作为列表，通过索引显示相应的屏幕。喜欢

body: [
      Expenses(),
      Inspiration()
      Personal(),
      Work(),
      More(),
    ].elementAt(selectedIndex),

drawer: MdDrawer(onTap: (int val){
                setState(() {
                    this._selectedIndex=val;
                 });
              } 
,)

现在您可以通过将索引作为Navigator.of(context).pop(index) 的返回值或将回调函数提供给MdDrawer 来推送所需的正文以进行显示。我们将做回调函数方法。索引返回将用于使用 setState 更新状态。

class MdDrawer extends StatelessWidget {
  final String title; final Function onTap;

  MdDrawer({Key key, this.title, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('MyPage'),
      ),
      drawer: Drawer(


        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[

            UserAccountsDrawerHeader(
              accountName: const Text(_AccountName),
              accountEmail: const Text(_AccountEmail),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.brown,
                child: Text(_AccountAbbr),
              ),
            ),

            ListTile(
              leading: Icon(Icons.lightbulb_outline),
              title: Text('Notes'),
              onTap: () => _alertOnListTileTap(context, 0),
            ),
           ListTile(
              leading: Icon(Icons.lightbulb_outline),
              title: Text('Expenses'),
              onTap: () => _alertOnListTileTap(context, 1),
            ),

            Divider(),

            ...

          ],
        ),
      ),
    );
  }

  _alertOnListTileTap(BuildContext context, int index ) {
    onTap(indext);
    Navigator.of(context).pop();

  }
}

希望对你有帮助

【讨论】：