flutter_pagewise 库不保留页面（滚动）state

Question

我正在使用flutter_pagewise库，并根据库的文档实现了分页网格（按照他们在https://pub.dev/packages/flutter_pagewise/example的示例），它通过网络获取占位符图像和文本。

在我的应用程序中，我有 2 个页面（一个称为PaginatedGrid ，另一个称为SearchPage ），我可以通过 BottomNavigationBar 切换到它们。 但是，当我切换到SearchPage ，然后切换回 PaginatedGrid 时， PaginatedGrid网格滚动 state 不会保留。 分页从头开始，屏幕滚动回顶部。

import 'package:myproject/my_events/my_events_page.dart';
import 'package:myproject/search/search_page.dart';
import 'package:myproject/widget/paginated_grid.dart';
import 'package:flutter/material.dart';

class PageWrapper extends StatefulWidget {
  @override
  _PageWrapperState createState() => _PageWrapperState();
}

class _PageWrapperState extends State<PageWrapper> {
  ScrollController _scrollController = ScrollController();
  int _curIndex = 0;
  List<Widget> _pages;
  final bucket = PageStorageBucket();
  final Key searchPageKey = PageStorageKey('searchKey');
  final Key paginatedGridKey = PageStorageKey('paginatedGrid');

  @override
  void initState() {
    _pages = [
      PaginatedGrid(key: paginatedGridKey),
      SearchPage(key: searchPageKey)
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(
        bucket: bucket,
        child: CustomScrollView(
          key: PageStorageKey(_pages[_curIndex].runtimeType.toString()),
          controller: _scrollController,
          slivers: <Widget>[SliverAppBar(), _pages[_curIndex]],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int i) {
          setState(() {
            _curIndex = i;
          });
        },
        currentIndex: _curIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Browse',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          )
        ],
      ),
    );
  }
}


Any help would be appreciated.

Answer 1

使用 indexedStack 是一种有效的解决方案。 分页的 state 在从底部导航栏导航到另一个选项卡时保留。

不要使用 PageStorage 小部件，而是使用 IndexedStack 小部件。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: currentTab,
        children: pages,
      ),
      bottomNavigationBar: BottomNavigationBar(

解决方案在这里描述： https://medium.com/@codinghive.dev/keep-state-of-widgets-with-bottom-navigation-bar-in-flutter-bb732214bd11