使用导航和堆栈将多个页面实现为单个页面

Question

在颤，我想使画面像Fragment在Android上，这是我的代码我试图取代每个屏幕为当前屏幕像Fragment.replecae在Android中，我使用Hook并Provider和我的代码工作正常时，在点击按钮他们，但我之间切换无法实现返回堆栈，这意味着当我点击Back手机上的按钮时，我的代码应该显示我存储到_backStack变量中的最新屏幕，在这个屏幕之间的每个切换我都将当前屏幕索引存储到这个变量中。

我怎样才能在我的示例代码中从这个堆栈中解出？

// Switch Between screens:
DashboardPage(), UserProfilePage(), SearchPage()
------------->   ------------->     ------------->

// When back from stack:
                      DashboardPage(), UserProfilePage(), SearchPage()
Exit from application <--------------  <----------------  <-----------

我使用过Hook并且我想用这个库功能实现这个动作

// Switch Between screens:
DashboardPage(), UserProfilePage(), SearchPage()
------------->   ------------->     ------------->

Answer 1

TL; 博士

完整代码在最后。

使用Navigator替代

你应该以不同的方式处理这个问题。我可以为您提供一个适合您的方法的解决方案，但是，我认为您应该通过实现自定义Navigator来解决这个问题，因为这是 Flutter 中的内置解决方案。

当您使用 时Navigator，您不需要任何基于流的管理，即您可以StreamBackStackSupport完全删除。

现在，您Navigator在Consumer之前拥有的位置插入一个小部件：

children: <Widget>[
  Expanded(
    child: Navigator(
      ...
    ),
  ),
  Container(...), // Your bottom bar..
]

导航器使用字符串管理其路由，这意味着我们需要有一种方法将您的enum（我重命名为Page）转换为Strings。我们可以使用describeEnum它并将其放入一个extension：

enum Page { screenDashboard, screenProfile, screenSearch }

extension on Page {
  String get route => describeEnum(this);
}

现在，您可以使用 eg 获取页面的字符串表示形式Page.screenDashboard.route。

此外，您希望将实际页面映射到片段小部件，您可以这样做：

class MainBodyApp extends HookWidget {
  final Map<Page, Widget> _fragments = {
    Page.screenDashboard: DashboardPage(),
    Page.screenProfile: UserProfilePage(),
    Page.screenSearch: SearchPage(),
  };
  ...

要访问Navigator，我们需要有一个GlobalKey. 通常我们会有一个StatefulWidget和管理GlobalKey这样的。由于您想使用flutter_hooks，我选择使用 aGlobalObjectKey代替：

  @override
  Widget build(BuildContext context) {
    final navigatorKey = GlobalObjectKey<NavigatorState>(context);
  ...

现在，您可以使用navigatorKey.currentState小部件中的任何位置来访问此自定义导航器。完整Navigator设置如下所示：

Navigator(
  key: navigatorKey,
  initialRoute: Page.screenDashboard.route,
  onGenerateRoute: (settings) {
    final pageName = settings.name;

    final page = _fragments.keys.firstWhere((element) => describeEnum(element) == pageName);

    return MaterialPageRoute(settings: settings, builder: (context) => _fragments[page]);
  },
)

如您所见，我们传递了navigatorKeycreated before 并定义了initialRoute，利用route我们创建的扩展。在 中onGenerateRoute，我们找到与Page路由名称 (a String)对应的枚举条目，然后返回MaterialPageRoute带有适当_fragments条目的 a。

要推送新路由，您只需使用navigatorKeyand pushNamed：

onPressed: () => navigatorKey.currentState.pushNamed(Page.screenDashboard.route),

返回键

我们还需要pop自定义调用我们的自定义导航器。为此，WillPopScope需要一个：

WillPopScope(
  onWillPop: () async {
    if (navigatorKey.currentState.canPop()) {
      navigatorKey.currentState.pop();
      return false;
    }

    return true;
  },
  child: ..,
)

访问嵌套页面内的自定义导航器

在传递给 的任何页面中onGenerateRoute，即在您的任何“片段”中，您可以只调用Navigator.of(context)而不是使用全局键。这是可能的，因为这些路由是自定义导航器的子级，因此BuildContext包含该自定义导航器。

例如：

// In SearchPage
Navigator.of(context).pushNamed(Page.screenProfile.route);

默认导航器

您可能想知道现在如何访问MaterialApp根导航器，例如推送新的全屏路由。你可以使用findRootAncestorStateOfType：

context.findRootAncestorStateOfType<NavigatorState>().push(..);

或者干脆

Navigator.of(context, rootNavigator: true).push(..);

这是完整的代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(StartupApplication());
}

enum Page { screenDashboard, screenProfile, screenSearch }

extension on Page {
  String get route => describeEnum(this);
}

class StartupApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BackStack Support App',
      home: MainBodyApp(),
    );
  }
}

class MainBodyApp extends HookWidget {
  final Map<Page, Widget> _fragments = {
    Page.screenDashboard: DashboardPage(),
    Page.screenProfile: UserProfilePage(),
    Page.screenSearch: SearchPage(),
  };

  @override
  Widget build(BuildContext context) {
    final navigatorKey = GlobalObjectKey<NavigatorState>(context);

    return WillPopScope(
      onWillPop: () async {
        if (navigatorKey.currentState.canPop()) {
          navigatorKey.currentState.pop();
          return false;
        }

        return true;
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('BackStack Screen'),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Navigator(
                  key: navigatorKey,
                  initialRoute: Page.screenDashboard.route,
                  onGenerateRoute: (settings) {
                    final pageName = settings.name;

                    final page = _fragments.keys.firstWhere(
                        (element) => describeEnum(element) == pageName);

                    return MaterialPageRoute(settings: settings,
                        builder: (context) => _fragments[page]);
                  },
                ),
              ),
              Container(
                width: double.infinity,
                height: 50.0,
                padding: const EdgeInsets.symmetric(horizontal: 15.0),
                color: Colors.indigo[400],
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      onPressed: () => navigatorKey.currentState
                          .pushNamed(Page.screenDashboard.route),
                      child: Text('Dashboard'),
                    ),
                    RaisedButton(
                      onPressed: () => navigatorKey.currentState
                          .pushNamed(Page.screenProfile.route),
                      child: Text('Profile'),
                    ),
                    RaisedButton(
                      onPressed: () => navigatorKey.currentState
                          .pushNamed(Page.screenSearch.route),
                      child: Text('Search'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class UserProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(' screenProfile ...'),
    );
  }
}

class DashboardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(' screenDashboard ...'),
    );
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(' screenSearch ...'),
    );
  }
}