撲動app抽屜導航到新頁面

Question

尋找更好的方法來實現它如何從app抽屜導航到下一頁，我在其他文件中創建了一個有狀態的小部件，並在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);