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

2023-03-29 15:50:15 浏览数 (2)

文章目录

  • 一、ScrollController 上拉加载更多
  • 二、ScrollController 使用流程
  • 三、ScrollController 判定滑动到底部
  • 四、完整代码示例
  • 五、相关资源

一、ScrollController 上拉加载更多


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

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

代码语言:javascript复制
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<Widget> children = const <Widget>[],
    int? semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
  }) 

二、ScrollController 使用流程


首先 , 声明 ScrollController 对象 ;

代码语言:javascript复制
  /// 滚动控制器
  ScrollController _scrollController = ScrollController();

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

代码语言:javascript复制
  @override
  void initState() {
    /// 为滚动控制器添加监听
    _scrollController.addListener(() {});
    super.initState();
  }

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

代码语言:javascript复制
/// 列表组件
child: ListView(
  controller: _scrollController,  /// 设置上拉加载更多
  children: _buildList(),
),

三、ScrollController 判定滑动到底部


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

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

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

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

加载更多方法 :

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

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

四、完整代码示例


代码语言:javascript复制
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<MyApp> {
  /// 滚动控制器
  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<String> nameList = List<String>.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<Null> _onRefresh() async {
    /// 强制休眠 1 秒
    await Future.delayed(Duration(seconds: 1));

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

  /// 创建列表
  List<Widget> _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
        ),
      ),
    );
  }
}

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

代码语言:javascript复制
var NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜',
  '林冲', '秦明', '呼延灼', '花荣', '柴进' ];

五、相关资源


参考资料 :

  • Flutter 官网 : https://flutter.dev/
  • Flutter 插件下载地址 : https://pub.dev/packages
  • Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
  • 官方 GitHub 地址 : https://github.com/flutter
  • Flutter 中文社区 : https://flutter.cn/
  • Flutter 实用教程 : https://flutter.cn/docs/cookbook
  • Flutter CodeLab : https://codelabs.flutter-io.cn/
  • Dart 中文文档 : https://dart.cn/
  • Dart 开发者官网 : https://api.dart.dev/
  • Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
  • Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
  • GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
  • Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
  • Dart 语言练习网站 : https://dartpad.dartlang.org/

重要的专题 :

  • Flutter 动画参考文档 : https://flutterchina.club/animations/

博客源码下载 :

  • GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 )
  • 博客源码快照 : https://download.csdn.net/download/han1202012/21611041 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

0 人点赞