Flutter Quick：【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )

一、ScrollController 上拉加载更多

在 FLutter 中 , 所有的列表都支持设置一个 ScrollController 类型的参数 ,

设置 ScrollController , 用于控制上拉加载更多内容 ;

class ListView extends BoxScrollView {
  ListView({
    Key? key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? controller,		// 滚动控制器 , 监听上拉加载更多 
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry? padding,
    this.itemExtent,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double? cacheExtent,
    List children = const [],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
  }) 

		 

二、ScrollController 使用流程

首先 , 声明 ScrollController 对象 ;

  /// 滚动控制器
  ScrollController _scrollController = ScrollController();

		 

然后 , 为 ScrollController 对象添加监听器 , 一般情况下 , 在 initState 方法中执行该操作 , 相应的在 dispose 方法中 , 执行 ScrollController 对象的 dispose 方法 ;

  @override
  void initState() {
    /// 为滚动控制器添加监听
    _scrollController.addListener(() {});
    super.initState();
  }

		 

最后 , 在 ListView 列表组件中设置 controller 属性 ;

	/// 列表组件
child: ListView(
  controller: _scrollController,  /// 设置上拉加载更多
  children: _buildList(),
),

		 

三、ScrollController 判定滑动到底部

调用 _scrollController.position.pixels 可以获取当前滚动的像素点 ;

调用 _scrollController.position.maxScrollExtent 可以获取当前最大可滚动位置 ;

如果上述两个值相等 , 那么说明已经滚动到列表最底部了 , 此时可以执行上拉加载更多

    /// 为滚动控制器添加监听
    _scrollController.addListener(() {
      /// _scrollController.position.pixels 是当前像素点位置
      /// _scrollController.position.maxScrollExtent 当前列表最大可滚动位置
      /// 如果二者相等 , 那么就触发上拉加载更多机制
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        /// 触发上拉加载更多机制
        _loadMore();
      }
    });

		 

加载更多方法 :

  /// 上拉加载更多
  _loadMore() async {
    /// 强制休眠 1 秒
    await Future.delayed(Duration(seconds: 1));

    /// 更新 UI , 再次复制一份数据 , 放入到集合中
    setState(() {
      /// 复制一份 NAMES 集合
      List nameList = List.from(NAMES);
      /// 再次将 NAMES 集合合并到被复制的集合中
      ///   此时该集合中就会出现两个 NAMES 集合
      nameList.addAll(NAMES);
      NAMES = nameList;
    });
  }

		 

四、完整代码示例

import 'package:flutter/material.dart';

var NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜',
  '林冲', '秦明', '呼延灼', '花荣', '柴进' ];

/// ListView 垂直列表
/// RefreshIndicator 下拉刷新
/// ScrollController 上拉加载更多
void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  /// 滚动控制器
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    /// 为滚动控制器添加监听
    _scrollController.addListener(() {
      /// _scrollController.position.pixels 是当前像素点位置
      /// _scrollController.position.maxScrollExtent 当前列表最大可滚动位置
      /// 如果二者相等 , 那么就触发上拉加载更多机制
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        /// 触发上拉加载更多机制
        _loadMore();
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    /// 销毁 滚动控制器 ScrollController
    _scrollController.dispose();
    super.dispose();
  }

  /// 上拉加载更多
  _loadMore() async {
    /// 强制休眠 1 秒
    await Future.delayed(Duration(seconds: 1));

    /// 更新 UI , 再次复制一份数据 , 放入到集合中
    setState(() {
      /// 复制一份 NAMES 集合
      List nameList = List.from(NAMES);
      /// 再次将 NAMES 集合合并到被复制的集合中
      ///   此时该集合中就会出现两个 NAMES 集合
      nameList.addAll(NAMES);
      NAMES = nameList;
    });
  }

  @override
  Widget build(BuildContext context) {
    /// 材料设计主题
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          /// 标题组件
          title: Text("ListView 示例"),
        ),

        /// 下拉刷新组件
        body: RefreshIndicator(             /// 设置下拉刷新组件
          onRefresh: _onRefresh,
          /// 列表组件
          child: ListView(
            controller: _scrollController,  /// 设置上拉加载更多
            children: _buildList(),
          ),
        ),
      ),
    );
  }

  /// 下拉刷新回调方法
  Future _onRefresh() async {
    /// 强制休眠 1 秒
    await Future.delayed(Duration(seconds: 1));

    /// 更新状态
    setState(() {
      /// 将 List 元素翻转
      NAMES = NAMES.reversed.toList();
    });
    return null;
  }

  /// 创建列表
  List _buildList(){
    /// 遍历 NAMES 数组
    /// 调用 map 方法遍历数组元素
    return NAMES.map((name) => _generateWidget(name)).toList();
  }

  Widget _generateWidget(name){
    return Container(
      height: 80,
      margin: EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.black),
      child: Text(
        name,
        style: TextStyle(
            color: Colors.yellowAccent,
            fontSize: 20
        ),
      ),
    );
  }
}

		 

执行结果 : 在下面的数组中 , ‘柴进’ 是最后一个元素 , 下拉到最后一个元素 , 会触发复制当前数组 , 添加到后面 , 然后更新列表 , 可以加载更多元素 ;

var NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜',
  '林冲', '秦明', '呼延灼', '花荣', '柴进' ];