Flutter - Cubit & Navigation 2.0：從頁面發出新頁面

Question

我正在嘗試使用 Navigation 2.0 和 BLoC 模式創建一個帶有 Flutter 的網站。 為此，我閱讀了以下指南：

• https://medium.com/@JalalOkbi/flutter-navigator-2-0-with-bloc-the-ultimate-guide-6672b115adf
• https://lucasdelsol01.medium.com/flutter-navigator-2-0-for-mobile-dev-bloc-state-management-integration-3a180b4d25b3
• 這個倉庫：https://lucasdelsol01.medium.com/flutter-navigator-2-0-for-mobile-dev-bloc-state-management-integration-3a180b4d25b3 （它實現了第一個指南）。

但是我面臨一個問題，我試圖從我的網站顯示頁面之一推送新頁面：新頁面永遠不會顯示！

要了解：

1. 每個頁面都通過MainNavigationCubit 。 這肘的 state（意思是頁）保存在NavigationStack中。
2. 我的MainNavigationCubit負責在我的自定義RouterDelegate中構建Navigator （參見下面的代碼）。 因此，在state 更改后，它會使用正確的頁面列表重建Navigator 。

問題背景：

• 我有一個“書”頁面，其中顯示有關特定書的詳細信息。
• 為了獲取詳細信息，它需要一個book id 。
• 如果 book id 無效或找不到，則通過MainNavigationCubit推送“404 not found page”。

例如，如果用戶手動將正確的 URL 輸入到書頁但 ID 無效，則可能會發生這種情況。

然而，盡管MainNavigationCubit正確地發出帶有相關頁面的新NavigationStack ，但從未顯示“404 未找到頁面”。

---

這是我的自定義RouterDelegate中的代碼：

@override
GlobalKey<NavigatorState> get navigatorKey => GlobalKey<NavigatorState>(debugLabel: 'main_navigation_key');

@override
Future<void> setNewRoutePath(PageConfig configuration) {
  if (configuration.route != homeRoute) {
    mainNavigationCubit.push(configuration.route, configuration.args);
  } else {
    mainNavigationCubit.clearToHome();
  }
  return SynchronousFuture(null);
}

@override
Widget build(BuildContext context) {
  return BlocBuilder<MainNavigationCubit, NavigationStack>(
    builder: (context, stack) {
      return Navigator(
        pages: stack.pages,
        key: navigatorKey,
        onPopPage: (route, result) => _onPopPage.call(route, result),
      );
    },
  );

@override
PageConfig get currentConfiguration => mainNavigationCubit.state.last;
bool _onPopPage(Route<dynamic> route, dynamic result) {
  final didPop = route.didPop(result);
  if (!didPop) {
    return false;
  }
  if (mainNavigationCubit.canPop()) {
    mainNavigationCubit.pop();
    return true;
  } else {
    return false;
  }
}

這是我的“Book”StatelessWidget 頁面中的代碼：

@override
Widget build(BuildContext context) {
  if (bookId == -1) {
    context.read<MainNavigationCubit>().showNotFound(); // let's assume this will be properly handled when I'll be creating this page's BLoC.
  }
  return // full book details UI;
}

以防萬一MainNavigationCubit.showNotFound()的代碼：

void showNotFound() {
  clearAndPush(notFound);
}

void clearAndPush(String path, [Map<String, dynamic>? args]) {
  final PageConfig pageConfig = PageConfig(location: path, args: args);
  emit(state.clearAndPush(pageConfig));
}

Answer 1

好的，經過大量調查，我找到了問題的原因。

正如文檔所說：在發出等於當前 state 的新 state 時，Cubit 不會通知聽眾。

就我而言，我的MainNavigationCubit的 state 是我從本指南中獲取的NavigationStack ： https://medium.com/@JalalOkbi/flutter-navigator-2-0-with-bloc-the-ultadimate-guide-6

查看代碼， NavigationStack公開了改變內部頁面列表的方法。

問題是這個列表屬於當前的 state ，因此修改它意味着也修改當前的 state。

由於當前和新的 state 都依賴於相同的確切列表，因此 Cubit 不會發出新的 state。