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

韩曙亮

发布于 2023-03-29 15:50:15

1.7K0

发布于 2023-03-29 15:50:15

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、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<Widget> children = const <Widget>[],
    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<String> nameList = List<String>.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<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
        ),
      ),
    );
  }
}

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

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 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除

listview