flutter - 使用提供程序重写嵌套的 Navigator 2.0 示例

Question

我正在寻找重写 of the official example for writing a nested navigator with bottom navigation .具体来说，我想使用提供程序编写另一个实现来提升状态，而不是像这里使用 ˋhandleBookTappedˋ 那样将回调传递给页面。
问:如何使用 Provider 将 BookAppState 传递给页面，同时在不丢失选项卡状态的情况下正确更新外部和内部导航器。

class InnerRouterDelegate extends RouterDelegate<BookRoutePath>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<BookRoutePath> {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  BooksAppState get appState => _appState;
  BooksAppState _appState;
  set appState(BooksAppState value) {
    if (value == _appState) {
      return;
    }
    _appState = value;
    notifyListeners();
  }

  InnerRouterDelegate(this._appState);

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        if (appState.selectedIndex == 0) ...[
          FadeAnimationPage(
            child: BooksListScreen(
              books: appState.books,
              onTapped: _handleBookTapped,
            ),
            key: ValueKey('BooksListPage'),
          ),
          if (appState.selectedBook != null)
            MaterialPage(
              key: ValueKey(appState.selectedBook),
              child: BookDetailsScreen(book: appState.selectedBook),
            ),
        ] else
          FadeAnimationPage(
            child: SettingsScreen(),
            key: ValueKey('SettingsPage'),
          ),
      ],
      onPopPage: (route, result) {
        appState.selectedBook = null;
        notifyListeners();
        return route.didPop(result);
      },
    );
  }

  @override
  Future<void> setNewRoutePath(BookRoutePath path) async {
    // This is not required for inner router delegate because it does not
    // parse route
    assert(false);
  }

  void _handleBookTapped(Book book) {
    appState.selectedBook = book;
    notifyListeners();
  }
}

Answer 1

添加 MultiProvider在您的应用程序上(因为您可能会使用多个)。

    Future<void> main() async {
      WidgetsFlutterBinding.ensureInitialized();
    
      runApp(
        /// Providers are above [MyApp] instead of inside it, so that tests
        /// can use [MyApp] while mocking the providers
        MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (_) => MyAppState()),
            //ChangeNotifierProvider(create: (_) => Counter()),
          ],
          child: RootRouter(),
        ),
      );
    
    }

Òn 您的 InnerRouterDelegate使用 .watch在构建中捕获您的索引更改。

@override
  Widget build(BuildContext context) {
    var idx = context.watch<MyAppState>().selectedBottomNavIndex;
    return Navigator(
...

在您的 bottomNavigationBar替换 appState.来自 context.watch<MyAppState>(). (注意我使用的是枚举作为索引，与官方示例略有不同)

bottomNavigationBar:
        BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: BottomNavigationBarItems.items(),
          currentIndex: context.watch<MyAppState>().selectedBottomNavIndex.index,
          //currentIndex: appState.selectedBottomNavIndex.index, //replace
          onTap: (newIndex) {
            context.read<MyAppState>().selectedBottomNavIndex= NavItem.values[newIndex];
            //appState.selectedBottomNavIndex = NavItem.values[newIndex]; //replace
          },
        ),

这将使其适用于移动设备。还有很多网络内容需要更新，代码也需要清理/删除。 appState变量变得过时。