0

問題

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,
              ),
            ),
        ],
      ),
    )

ノート :

  1. すべての tabbarview ページで、AutomaticKeepAliveClientMixinを使用して、ページが 1 回だけ作成されるようにしています。
  2. すべての tabbarview ページで、CutomScrollView を返しています。

これまでに試したこと

タブバービュー内のスクロール位置を維持するために、さまざまな方法を試しました。

  1. PageStorageKey('page')
  2. PageStorageKey('page')PageStorage()
  3. ScrollControllerCustomScrollView で
  4. PageStorageKeyウィジェット コンストラクターを介して CustomScrollView に渡す

スクロール位置を維持するために上記のすべてを試しましたが、ビデオでわかるように、スクロール位置が維持されていません。スクロール位置は、CustomScrollView が TabbarView に直接追加された場合にのみ保存されます。しかし、私の場合、CustomScrollView は、状態管理とスクロール位置の維持に Stacked (Provide) を使用するステートフル ウィジェットにネストされています。

ただし、各ページの CustomScrollView にコントローラーを割り当てると、SliverAppBar のスクロール アニメーションが失われます。

ネストされたスクロールビューで状態を維持する方法はありますか??

4

0 に答える 0