Flutter TabbarView не сохраняет позицию прокрутки даже после использования клавиш

Проблема

Смотрите видео на Imgur: Imgur

Вы также можете посмотреть видео здесь: Cloudinary

Как вы можете видеть на видео, положение прокрутки не сохраняется. Похоже, страницы прокручиваются все вместе.

Базовая структура приложения

Я использую NestedScrollView с SliverAppBar и TabBarView, чтобы получить простой эффект прокрутки. Панель вкладок показывает разные страницы, которые, в свою очередь, используют Provider для управления состоянием, и я возвращаю CustomScrollView.

Домашняя страница:

          DefaultTabController(
          length: 3,
          child: Scaffold(
            body: NestedScrollView(
              headerSliverBuilder: (context, innerBoxIsScrolled) => [
                SliverAppBar(
                  floating: true,
                  pinned: true,
                  snap: true,
                  forceElevated: true,
                  title: Text('Title'),
                  bottom: TabBar(
                    tabs: [
                      Tab(
                        icon: Icon(Icons.extension_rounded),
                      ),
                      Tab(
                        icon: Icon(Icons.folder_rounded),
                      ),
                      Tab(
                        icon: Icon(Icons.settings_rounded),
                      )
                    ],
                  ),
                ),
              ],
              body: TabBarView(
                children: [
                  PageStorage(
                    bucket: _bucket,
                    child: ExtensionsView(
                      key: PageStorageKey('extensions_view'),
                    ),
                  ),
                  PageStorage(
                    bucket: _bucket,
                    child: VideosView(
                      key: PageStorageKey('videos_view'),
                    ),
                  ),
                  PageStorage(
                    bucket: _bucket,
                    child: SettingsView(
                      key: PageStorageKey('settings'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );

Панель вкладок Просмотр страниц

      return ViewModelBuilder<ExtensionsViewModel>.reactive(
      viewModelBuilder: () => ExtensionsViewModel(),
      onModelReady: (model) => model.fetchData(),
      builder: (context, model, child) => CustomScrollView(
        slivers: [
          if (model.isBusy)
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return FilledVideoCard.loading(
                    borderRadius: BorderRadius.zero,
                  );
                },
                childCount: 3,
              ),
            )
          else
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  final data = model.extensions[index];
                  return FilledVideoCard(
                    key: ObjectKey(data),
                    title: data.title,
                    price: data.price,
                    date: data.date,
                    image: data.image,
                    tags: [data.version, ...data.tags],
                    borderRadius: BorderRadius.zero,
                    onTap: () {},
                  );
                },
                childCount: model.extensions.length,
              ),
            ),
        ],
      ),
    )

Примечание :

  1. На всех страницах tabbarview я использую AutomaticKeepAliveClientMixin, чтобы убедиться, что эта страница создается только один раз.
  2. На всех страницах tabbarview я возвращаю CutomScrollView.

Что я пробовал до сих пор

Я пробовал разные методы для поддержания позиции прокрутки внутри tabbarview.

  1. PageStorageKey('page') с участием PageStorage()
  2. ScrollController с CustomScrollView
  3. Проходящий PageStorageKey в CustomScrollView через конструктор виджетов

Я пробовал все вышеперечисленное, чтобы сохранить положение прокрутки, но, как вы можете видеть на видео, положение прокрутки не сохраняется. Положение прокрутки сохраняется только в том случае, если CustomScrollView добавляется непосредственно в TabbarView. Но в моем случае CustomScrollView вложен в виджет с отслеживанием состояния, который использует Stacked (Provide) для управления состоянием, а положение прокрутки не поддерживается.

Однако, если я назначаю контроллер CustomScrollView на каждой странице, я теряю анимацию прокрутки SliverAppBar.

Так есть ли способ сохранить состояние во вложенном scrollview??

0 ответов

Другие вопросы по тегам