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,
),
),
],
),
)
Примечание :
- На всех страницах tabbarview я использую AutomaticKeepAliveClientMixin, чтобы убедиться, что эта страница создается только один раз.
- На всех страницах tabbarview я возвращаю CutomScrollView.
Что я пробовал до сих пор
Я пробовал разные методы для поддержания позиции прокрутки внутри tabbarview.
-
PageStorageKey('page')
с участиемPageStorage()
-
ScrollController
с CustomScrollView - Проходящий
PageStorageKey
в CustomScrollView через конструктор виджетов
Я пробовал все вышеперечисленное, чтобы сохранить положение прокрутки, но, как вы можете видеть на видео, положение прокрутки не сохраняется. Положение прокрутки сохраняется только в том случае, если CustomScrollView добавляется непосредственно в TabbarView. Но в моем случае CustomScrollView вложен в виджет с отслеживанием состояния, который использует Stacked (Provide) для управления состоянием, а положение прокрутки не поддерживается.
Однако, если я назначаю контроллер CustomScrollView на каждой странице, я теряю анимацию прокрутки SliverAppBar.
Так есть ли способ сохранить состояние во вложенном scrollview??