未触发带有 tabbarview 滚动的 NestedScrollView

Question

我有下面的代码来让 TabBarView 使用 sliver 效果。问题是当用户滚动到最后时我需要加载更多数据。但是_handleScrolling 函数不会在我每次向下滚动时被触发。 我必须再次上下滚动才能触发。它第一次工作，但在切换选项卡和向下滚动事件后未触发。我必须再次向上滚动。

有人知道为什么吗？

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class KnowledgePage2 extends StatefulWidget {
  @override
  _KnowledgePageState createState() => _KnowledgePageState();
}

class _KnowledgePageState extends State<KnowledgePage2> with TickerProviderStateMixin {
  TabController _tabController;
  ScrollController _scrollController = ScrollController();
  List<String> categories = ["A", "B", "C"];
  List<String> items1 = List<String>.generate(50, (i) => "A $i + 1");
  List<String> items2 = List<String>.generate(50, (i) => "B $i + 1");
  List<String> items3 = List<String>.generate(50, (i) => "C $i + 1");

  @override
  void initState() {
    super.initState();

    _tabController = TabController(vsync: this, initialIndex: 0, length: categories.length);
    _scrollController.addListener(_handleScrolling);
  }

  @override
  void dispose() {
    super.dispose();

    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              floating: false,
              snap: false,
              pinned: true,
              title: Text("text"),
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Column(
                  children: <Widget>[
                    SizedBox(height: 80),
                    CachedNetworkImage(width: 320, fit: BoxFit.cover, imageUrl: "http://via.placeholder.com/640x360"),
                  ],
                ),
              ),
              expandedHeight: 320.0,
              bottom: TabBar(
                controller: _tabController,
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorWeight: 5.0,
                isScrollable: true,
                tabs: categories.map((category) => Tab(text: category)).toList(),
              ),
            )
          ];
        },
        body: Column(
          children: <Widget>[
            Expanded(
              child: TabBarView(controller: _tabController, children: <Widget>[
                ListView.builder(
                  itemCount: items1.length,
                  itemBuilder: (context, i) {
                    return Text(items1[i], style: TextStyle(fontSize: 16, height: 2.2, fontWeight: FontWeight.w500, color: Colors.black));
                  },
                ),
                ListView.builder(
                  itemCount: items2.length,
                  itemBuilder: (context, i) {
                    return Text(items2[i], style: TextStyle(fontSize: 16, height: 2.2, fontWeight: FontWeight.w500, color: Colors.black));
                  },
                ),
                ListView.builder(
                  itemCount: items3.length,
                  itemBuilder: (context, i) {
                    return Text(items3[i], style: TextStyle(fontSize: 16, height: 2.2, fontWeight: FontWeight.w500, color: Colors.black));
                  },
                )
              ]),
            ),
          ],
        ),
      ),
    );
  }

  void _handleScrolling() {
    var isEnd = (_scrollController.offset >= _scrollController.position.maxScrollExtent) &&
        !_scrollController.position.outOfRange &&
        (_scrollController.position.axisDirection == AxisDirection.down);

    debugPrint("---------------- $isEnd");

    if (isEnd) {}
  }
}

Answer 1

您可能需要考虑将 ScrollControllers 添加到每个 ListView 中。这样，您将拥有用于刷新每个 ListView 的单独函数。我在本地尝试过，它按预期工作。

ListView.builder(
  controller: _scrollControllerA,
  ...
),
ListView.builder(
  controller: _scrollControllerB,
  ...
),
ListView.builder(
  controller: _scrollControllerC,
  ...
)

另外，请记住在不使用时处置监听器。

@override
void dispose() {
  super.dispose();

  _tabController.dispose();
  _scrollControllerA.dispose();
  _scrollControllerB.dispose();
  _scrollControllerC.dispose();
}