flutter 应用程序抽屉导航到新页面

Question

寻找更好的方法来解决如何从应用程序抽屉导航到下一页的问题，我在其他文件中制作了一个有状态小部件并导入到 main.dart 中，而不是

Navigate.pop(context);

我用什么？

我努力了

Navigator.of(context).push(
    MaterialPageRoute<Null>(builder: (BuildContext context) {
        return new HomePage();

它会在上一页上加载页面并使事情变得滞后。

下面是代码。

  return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('some text')),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
                image: DecorationImage(image: AssetImage("assets/gold.jpg"),fit: BoxFit.cover)
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer // how do i close the drawer after click?
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );

我希望当我单击应用程序抽屉链接时，它会将我带到一个新页面并关闭应用程序抽屉本身

Answer 1

如果您正在寻找一种方法来编辑当前页面（例如选项卡），然后在视图之间切换，而无需实际启动新的页面路由。

我通常做的是：

enum Section
{
    GUEST,
    HOME,
    PAGE_1,
    PAGE_2
}

您的主要构建功能：

@override
Widget build(BuildContext context)
{
    Widget body;

    /// You can easily control the section for example inside the initState where you check
    /// if the user logged in, or other related logic
    switch (section)
    {
        /// This is for example a login page since the user not logged in
        case Section.GUEST:
            break;

        /// Display the home section, simply by
        case Section.HOME:
            body = HomeSection();
            break;

        case Section.PAGE_1:
            body = Page1Section();
            break;

        case Section.PAGE_2:
            body = Page2Section();
            break;
    }

    return Scaffold(
        body: Container(
            child: body,
        ),
        /// Display the drawer for logged in users only
        drawer: section != Section.GUEST ? Drawer(
            // Your drawer
        ) : null,
    );
}

这甚至会保存这些部分的状态，并且您可以在它们之间快速移动。

重新调整抽屉，你做对了。您只需使用上下文中的导航器进行弹出即可。只要确保您有正确的上下文即可。（而不是传播的）

当然，更改部分很简单：

setState(() => section = Section.HOME);