未触发带有tabbarview滚动的NestedScrollView

时间:2019-09-20 14:20:24

标签: flutter dart flutter-layout flutter-sliver

我有以下代码来使TabBarView带有条状效果。问题是,当用户滚动到末尾时,我需要加载更多数据。但是_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) {}
  }
}

0 个答案:

没有答案