問題
Imgur でビデオを見る : Imgur
ここでもビデオを見ることができます:Cloudinary
ビデオでわかるように、スクロール位置が維持されていません。ページが一斉にスクロールしているように見えます。
アプリの基本構造
NestedScrollView を SliverAppBar および TabBarView と共に使用して、単純なスクロール効果を実現しています。タブバーには、状態管理にプロバイダーを使用するさまざまなページが表示され、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を使用して、ページが 1 回だけ作成されるようにしています。
- すべての tabbarview ページで、CutomScrollView を返しています。
これまでに試したこと
タブバービュー内のスクロール位置を維持するために、さまざまな方法を試しました。
PageStorageKey('page')
PageStorageKey('page')
とPageStorage()
ScrollController
CustomScrollView でPageStorageKey
ウィジェット コンストラクターを介して CustomScrollView に渡す
スクロール位置を維持するために上記のすべてを試しましたが、ビデオでわかるように、スクロール位置が維持されていません。スクロール位置は、CustomScrollView が TabbarView に直接追加された場合にのみ保存されます。しかし、私の場合、CustomScrollView は、状態管理とスクロール位置の維持に Stacked (Provide) を使用するステートフル ウィジェットにネストされています。
ただし、各ページの CustomScrollView にコントローラーを割り当てると、SliverAppBar のスクロール アニメーションが失われます。
ネストされたスクロールビューで状態を維持する方法はありますか??