滑动应用抽屉导航到新页面

时间:2019-06-16 20:09:31

标签: flutter flutter-layout android-studio-3.4

寻找更好的方法来实现如何从应用程序抽屉导航至下一页,我在其他文件中制作了有状态的小部件,并导入到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);
              },
            ),
          ],
        ),
      ),
    );

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

1 个答案:

答案 0 :(得分:0)

如果您正在寻找一种方法来编辑当前页面,例如标签,然后在视图之间切换,而无需实际启动新的页面路线。

我通常要做的是:

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);