Flutter 新版本中的 ScrollController答案

【问题标题】：ScrollController's using Flutter's new versionFlutter 新版本中的 ScrollController
【发布时间】：2021-11-14 08:30:42
【问题描述】：

我对 Flutter 的 ScrollController 有疑问。当我滚动 ListView 视图并到达列表末尾时，我希望得到通知（在调试控制台中）。我认为我学到的东西不适用于flutter的新版本。你知道为什么吗？或者我在代码中的某个地方犯了错误？

这就是我所拥有的

   class _ExploreScreenState extends State<ExploreScreen> {
  final mockServer = MockFooderlichService();
  late final ScrollController _scrollController;

  _scrollListener() {
    if (_scrollController.offset >=
            _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }

    if (_scrollController.offset <=
            _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ExploreData>(
      future: mockServer.getExploreData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final recipes = snapshot.data!.todayRecipes;

          return ListView(
            controller: _scrollController,
            scrollDirection: Axis.vertical,
            children: [
              TodayRecipeListView(recipes: recipes),
              const SizedBox(
                height: 16,
              ),
              FriendPostListView(
                friendPosts: snapshot.data!.friendPosts,
              ),
            ],
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

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

【问题讨论】：

标签： flutter listview scrollcontroller

【解决方案1】：

你的代码中没有这样的问题，除了打印语句，都具有相同的字符串值debugPrint("reach the top");

 _scrollListener() {
    if (_scrollController.offset >=
            _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the bottom");
      });
    }

    if (_scrollController.offset <=
            _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
  }

它能解决你的问题吗？

【讨论】：

【解决方案2】：

将此添加到您的 initState 中。让我知道它是否适合你。

 _scrollController.addListener(() { 
  if (_scrollController.position.atEdge) {
      if (_scrollController.position.pixels == 0) {
        print("At the top");
      } else {
        print("At the bottom");
      }
    }
  });

【讨论】：