[Discussions] 请问这个库可以解决NestedScrollView+TabBarView的jumpTo(0)问题吗？

[Dabbit-Chan]

Content

https://gist.github.com/Dabbit-Chan/3772e7e8c17752b1b91760618ec79f14

这是一个简单的demo。现在的问题是当A页面滚动超过一屏时置顶按钮出现，然后左滑出现B页面，B页面不应该出现置顶按钮，但我没有办法获取B页面当前的pixels。只能在B页面进行一下滚动，去获取B页面的pixels。不知道用这个库有没有办法解决这种情况？

我有试过在TabController的indexIsChanging为false后通过PrimaryScrollController.of(context)去获取，结果会出现ScrollController attached to multiple scroll views的报错

[LinXunFeng]

试试看

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> tabList = ['AA', 'BB', 'CC'];

  bool showStickyButton = false;
  ScrollController? bodyScrollController;

  double depth0Pixels = 0;
  double depth2Pixels = 0;

  final nestedScrollUtil = NestedScrollUtil();
  final nestedScrollViewKey = GlobalKey();

  bool hasAddListener = false;

  ScrollController outerScrollController = ScrollController();
  late SliverObserverController observerController = SliverObserverController(
    controller: outerScrollController,
  );

  @override
  void dispose() {
    outerScrollController.dispose();
    nestedScrollUtil.reset();
    super.dispose();
  }

  void updateStickyButton(double scrollOffset) {
    bool newValue = scrollOffset > MediaQuery.of(context).size.height;

    if (showStickyButton != newValue) {
      if (mounted) {
        setState(() {
          showStickyButton = newValue;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notification) {
        if (notification.metrics.axis == Axis.vertical) {
          switch (notification.depth) {
            case 0:
              {
                depth0Pixels = notification.metrics.pixels;
                break;
              }
            case 2:
              {
                depth2Pixels = notification.metrics.pixels;
                break;
              }
          }
          double totalPixels = depth0Pixels + depth2Pixels;

          updateStickyButton(totalPixels);
        }
        return false;
      },
      child: DefaultTabController(
        length: tabList.length,
        child: Scaffold(
          body: _buildObserver(),
          floatingActionButton: Visibility(
            visible: showStickyButton,
            child: FloatingActionButton(
              onPressed: () {
                if (bodyScrollController != null) {
                  bodyScrollController!.jumpTo(0);
                }
              },
              child: const Icon(Icons.upload),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildObserver() {
    return SliverViewObserver(
      controller: observerController,
      child: _buildNestedScrollView(),
      sliverContexts: () {
        return nestedScrollUtil.bodySliverContexts;
      },
      customOverlap: (sliverContext) {
        return nestedScrollUtil.calcOverlap(
          nestedScrollViewKey: nestedScrollViewKey,
          sliverContext: sliverContext,
        );
      },
    );
  }

  Widget _buildNestedScrollView() {
    return ExtendedNestedScrollView(
      key: nestedScrollViewKey,
      controller: outerScrollController,
      onlyOneScrollInBody: true,
      pinnedHeaderSliverHeightBuilder: () =>
          46 +
          kToolbarHeight +
          MediaQuery.of(context).viewPadding.top, // 46 = _kTabHeight
      headerSliverBuilder: (_, __) => [
        SliverAppBar(
          pinned: true,
          title: Text(widget.title),
          expandedHeight: 300,
          bottom: TabBar(
            tabs: tabList.map((e) => Tab(text: e)).toList(),
          ),
        ),
      ],
      body: Builder(builder: (context) {
        bodyScrollController ??= PrimaryScrollController.of(context);

        final TabController tabController = DefaultTabController.of(context);
        WidgetsBinding.instance.addPostFrameCallback((_) {
          if (!hasAddListener) {
            hasAddListener = true;
            tabController.addListener(() async {
              if (tabController.indexIsChanging == false) {
                // 已经翻页完成
                // 这里可以执行你需要的逻辑，比如打印当前页
                print('Tab 已经翻页到: ${tabController.index}');
                final sliverContext =
                    nestedScrollUtil.bodySliverContexts[tabController.index];
                final result = await observerController.dispatchOnceObserve(
                  sliverContext: sliverContext,
                  isForce: true,
                  isDependObserveCallback: false,
                );
                result.observeAllResult.forEach((key, value) {
                  if (key != sliverContext) return;

                  final scrollOffset = value.scrollOffset;
                  debugPrint('scrollOffset: $scrollOffset');
                  updateStickyButton(scrollOffset);
                });
              }
            });
          }
        });
        return TabBarView(
          controller: tabController,
          children: List.generate(
            tabList.length,
            (index) => _ScrollView(onItemBuilder: (context) {
              if (!nestedScrollUtil.bodySliverContexts.contains(context)) {
                nestedScrollUtil.bodySliverContexts.add(context);
              }
            }),
          ),
        );
      }),
    );
  }
}

class _ScrollView extends StatefulWidget {
  final Function(BuildContext ctx) onItemBuilder;
  const _ScrollView({required this.onItemBuilder});

  @override
  State<_ScrollView> createState() => _ScrollViewState();
}

class _ScrollViewState extends State<_ScrollView>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(
      padding: EdgeInsets.zero,
      itemBuilder: (ctx, index) {
        widget.onItemBuilder(ctx);
        return ListTile(title: Text('$index'));
      },
      itemCount: 100,
    );
  }

  @override
  bool get wantKeepAlive => true;
}

[Dabbit-Chan]

可以了，感谢大佬。看起来是indexIsChanging为false之后用sliverContexts计算了一遍当前页面的位置？学到了

[LinXunFeng]

是的