如何在 nestedScrollView 中的 sliverList 中滚动 listview.builder 并对 listview.builder 进行分页？

Question

当我在 NestedScrollView 的主体中滚动 ListView.builder 时，它独立于 SliverToBoxAdapter 和 SliverList 滚动。这意味着当我滚动 listview.builder 时，只有下图中的彩色部分移动了。

我怎样才能做到这样，当我滚动 listview.builder 时，整个屏幕一起移动（甚至 SliverToBoxAdapter 和 SliverList 一起向上滚动）并且当 listview.builder 到达列表末尾时可以对它进行分页？

UI代码

Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverToBoxAdapter(child: SizedBox(height: 300)),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  TabBar(
                    indicator: UnderlineTabIndicator(
                      borderSide: BorderSide(width: 1.5,color: Colors.white),
                      // insets: EdgeInsets.symmetric(horizontal:60.0)
                    ),
                    tabs: <Widget>[
                      Icon(
                        CupertinoIcons.rectangle_grid_2x2,
                      ),
                      Icon(
                        CupertinoIcons.doc_plaintext,
                      ),
                    ],
                  ),

                ],
              ),
            )
          ];
        },
        body:
        TabBarView(
          controller: _tabController,
          children: [
            ListView.builder(
                controller: controller,
                shrinkWrap: true,
                itemCount: cardDetail.length,
                itemBuilder: (BuildContext context, int index) {
                  return CardWidget(cardDetail[index], index);
                }),
            ListView.builder(
                controller: differentController,
                shrinkWrap: true,
                itemCount: differentCardDetail.length,
                itemBuilder: (BuildContext context, int index) {
                  return CardWidget(differentCardDetail[index], index);
                }),
          ],
        ),
      ),
    );

分页代码

_controller = ScrollController();
_controller.addListener(_scrollListener);

_scrollListener()async {
    if (_controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange) {
        loadMoreData();
    }
  }

Answer 1

鉴于

NestedscrollView

是您的父部件并且可滚动，您可以禁用

listview

的滚动物理并使用

NestedScrollView

物理。

ListView.builder(
                 physics:NeverScrollablePhysics(),
                //controller: differentController,
                shrinkWrap: true,
                itemCount: differentCardDetail.length,
                itemBuilder: (BuildContext context, int index) {
                  return CardWidget(differentCardDetail[index], index);
                }),

Answer 2

我想，我为这种情况找到了一些解决方案——我们可以使用 notificationListener:

return NotificationListener(
  child: RefreshIndicator(
    onRefresh: () => Future(() => paginationCubit.refreshAllItems()),
    child: resultWidget,
  ),
  onNotification: (notification) {
    if (notification is ScrollUpdateNotification) {
      scrollVisibilityController.updateVisibilityFromNotificationListener(notification);
    } else if (notification is ScrollEndNotification) {
      if (notification.metrics.pixels == notification.metrics.maxScrollExtent) {
        paginationCubit.loadItems(args: getArgumentsForLoading());
        return true;
      }
    }
    return true;
  },
);

希望它能为别人节省时间。来源：https://reactree.com/pagination-in-nestedscrollview-using-scrollnotification-in-flutter/