首页 > 解决方案 > 与嵌套导航器和 BottomNavigationBar 一起使用时,PageStorage 不会保持滚动位置

问题描述

我正在尝试在 BottomNavigationBar 的每个选项卡下使用单独的导航PageStorageBucketPageStoragePageStorageKey当我切换标签时,它不会保留滚动位置。

如果我从树中删除 Navigator 小部件而不是直接使用页面,它会按预期工作。每个选项卡都会记住它们的滚动位置。

请帮助我使用 Navigator 小部件或 PageStore 对象的方式有什么问题?

class MyTabPage extends StatefulWidget {
  ViewModel viewModel;
  RouteProvider routeProvider;
  MyTabPage({
    final Key key,
    final RouteProvider routeProvider,
    @required final this.viewModel})
      : assert(viewModel != null),
        assert(routeProvider != null),
        super(key: key);

  @override
  _MyTabPageState createState() => _MyTabPageState();
}

class _MyTabPageState extends State<MyTabPage> {
  List<MyTabNavigator> myPageTabNavigators;
  final PageStorageBucket pageStorageBucket = PageStorageBucket();

  @override
  void initState() {
    myPageTabNavigators = _tabItems.map((item) =>
        _tabNavigator(item, PageStorageKey("TNTNTN" + item.title)).toList(growable: false);
    super.initState();
  }

  @override
  Widget build(final BuildContext context) {
    return StreamBuilder(
        stream: viewModel.selectedItemStream,
        initialData: widget.viewModel.items.first,
        builder: (final context, final snapshot) {
          final myPageTabItem selectedItem = snapshot.data as myPageTabItem;
          return WillPopScope(
              child: Scaffold(
                body: PageStorage(
                  bucket: pageStorageBucket,
                  child: myPageTabNavigators[widget.viewModel.items.indexOf(selectedItem)]
                ),
                bottomNavigationBar: MyPageNavigationBar(
                  selectedTabItem: selectedItem
                ),
              )
          );
        });
  }

  MyTabNavigator _tabNavigator(final MyTabItem myTabItem, Key key) {
    return MyTabNavigator(
        key: key,
        myTabItem: myTabItem,
        routeProvider: this.widget.routeProvider
    );
  }
}

class MyTabNavigator extends StatefulWidget {
  final MyTabItem tabItem;
  final RouteProvider routeProvider;

  MyTabNavigator({
      Key key,
      @required final this.myTabItem,
      @required final this.routeProvider})
      : assert(myTabItem != null),
        assert(routeProvider != null),
        super(key: key);

  @override
  _MyTabNavigatorState createState() => _MyTabNavigatorState();
}

class _MyTabNavigatorState extends State<MyTabNavigator> {
  @override
  Widget build(final BuildContext context) {
    String initialRoute = widget.myTabItem.initialRoute;
//    return widget.routeProvider.applicationRoutes[initialRoute](context); ==> this works, but below line does not work
    return Navigator(
        key: widget.key,
        initialRoute: initialRoute,
        onGenerateRoute: _onGenerateRoute
    );
  }

  Route<dynamic> _onGenerateRoute(final RouteSettings routeSettings) {
    return MaterialPageRoute(
        builder: (context) {
             return widget.routeProvider.applicationRoutes[routeSettings.name](context);
        },
        settings: routeSettings
    );
  }
}

标签: flutter

解决方案


推荐阅读