flutter - ネストされたスクロールバーの問題: NestedScrollView、SliverAppBar、SliverPersistentHeader、TabBarView、および PageView

Question

この問題はしばらくの間私を悩ませてきました。無数の Web ページを読んでも、まだ解決できません。多分あなたは助けることができる!

私は次のシナリオを得ました：

Flutter アプリには、PageViewわずか 3 ページの があります。

最初のページには単純なGridView(垂直スクロール) があり、ネストされたスクロールに問題はありません。

3 ページ目はシンプルなListView項目リストで、スクロールしても問題ありません。

2 番目のページには があり、その:とNestedScrollViewの 2 つのウィジェットがあります。ここには派手なものはありません。headerSliverBuilderSliverAppBarSliverPersistentHeader

の本文には、 3 つのタブを含む がNestedScrollView含まれており、水平方向のスワイプ (このページを含むTabBarViewと同じスワイプ方向) を使用してそれらの間をスワイプすることができます。PageView

本文は、スクロールの問題が発生する場所です。

3 つのタブ間をスワイプするのは魅力的です。ただし、現在のタブが最初で、さらに左にスワイプしようとすると (指の動きは左から右)、最初のページ (に属するPageView) は表示されません。逆に、現在のタブが 3 番目で、さらに右にスワイプしようとすると (指の動きは右から左へ)、何も起こりません。

2 ページ目に含まれるヘッダーで同じ指の動きをすると、ページは正常に (1 ページ目または 3 ページ目のいずれかに) めくれます。

2 ページ目のコードは次のとおりです。タブが端に到達したときに、内部のスワイプ モーションTabBarViewがコンテナに反映されない理由を知りたいです。

Scaffold(
  appBar: _generateAppBar(),
  body: DefaultTabController(
    length: 3,
    child: NestedScrollView(
      headerSliverBuilder: (_, __) => [
        SliverAppBar(
          backgroundColor: backgroundColor,
          elevation: 0.0,
          expandedHeight: 200.0,
          floating: true,
          pinned: false,
          flexibleSpace: backgroundImageView,
        ),
        SliverPersistentHeader(
          floating: false,
          delegate: _SliverAppBarDelegate(
            TabBar(
              labelColor: Theme.of(context).primaryColor,
              unselectedLabelColor: Colors.black26,
              indicatorWeight: 2.5,
              tabs: const [
                Text('Tab 1'),
                Text('Tab 2'),
                Text('Tab 3'),
              ],
            ),
          ),
          pinned: true,
        ),
      ],
      body: TabBarView(
        children: [
          Center(child: Text('Body 1')),
          Center(child: Text('Body 2')),
          Center(child: Text('Body 3')),
        ],
      ),
    ),
  ),
);

補助クラス:

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;

  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) =>
    Container(child: _tabBar);

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) =>
    false;
}

これを修正する方法はありますか？ありがとう！