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

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

文章目录

一、ScrollController 上拉加载更多

二、ScrollController 使用流程

三、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<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 = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜',
  '林冲', '秦明', '呼延灼', '花荣', '柴进' ];



image.png


目录
相关文章
|
1月前
|
iOS开发 UED
Flutter 动态修改应用图标功能指南
探索Flutter中动态应用图标的实现方法,了解如何为用户提供独特体验,促进用户升级和应用内购买。
118 0
Flutter 动态修改应用图标功能指南
|
1月前
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套
Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套 在 Flutter 中,ListView 和 PageView 是两个常用的控件,它们可以用于滑动展示大量内容的场景,且支持各种嵌套方式,本文将介绍其中的一些花式嵌套方式。
133 0
|
1月前
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
10天前
|
Dart 监控 开发者
详细介绍Flutter Profiler的功能、使用方法以及如何利用它来提升应用的性能
【6月更文挑战第11天】Flutter Profiler是用于优化Flutter应用的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者监控运行时性能,识别瓶颈,如CPU过度使用、渲染问题、内存泄漏和网络效率低。通过选择分析类型、开始分析、查看结果,开发者可进行针对性优化。最佳实践包括定期分析、结合实际场景、关注关键指标及结合其他工具。有效利用Profiler能提升应用性能和用户体验。
32 2
|
10天前
|
开发框架 开发者 UED
Flutter作为一款跨平台的移动应用开发框架,自然也提供了丰富的工具和功能来支持可访问性和无障碍设计
【6月更文挑战第11天】Flutter是一款注重可访问性设计的跨平台移动应用开发框架,提供语义化组件、文本缩放、对比度调整、动态内容更新通知和键盘导航等功能,支持无障碍体验。开发者应结合简化操作、清晰反馈、多输入方式支持及测试优化等原则,以创建包容性更强的应用,满足不同用户需求,体现社会责任。
22 1
|
10天前
|
开发框架 Dart JavaScript
深入探讨Flutter中的Web支持功能,以及如何利用Flutter构建跨平台Web应用的最佳实践
【6月更文挑战第11天】Flutter,Google的开源跨平台框架,已延伸至Web支持,让开发者能用同一代码库构建移动和Web应用。Flutter Web基于Dart转JavaScript,利用WebAssembly和JavaScript在Web上运行。构建Web应用最佳实践包括选择合适项目、优化性能、进行兼容性测试和利用Flutter的声明式UI、热重载等优势。尽管性能挑战存在,Flutter Web为跨平台开发提供了更多机会和潜力。
36 1
|
1月前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
【4月更文挑战第30天】Flutter开发中,优化列表和滚动视图至关重要。本文介绍了几种优化方法:1) 使用`ListView.builder`和`GridView.builder`实现懒加载;2) 复用子组件以减少实例创建;3) 利用`CustomScrollView`和`Slivers`提升滚动性能;4) 通过`NotificationListener`监听滚动事件;5) 使用`KeepAlive`保持列表项状态。掌握这些技巧能提升应用性能和用户体验。
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
|
1月前
|
缓存
使用Riverpod在Flutter中创建Todo列表
学习如何使用Riverpod在Flutter中构建一个功能完整的Todo列表应用。通过Consumer组件、ConsumerStatefulWidget类、ref.read方法和provider build重写,了解Riverpod的状态管理和更新状态机制。
297 7
使用Riverpod在Flutter中创建Todo列表
|
1月前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
|
1月前
|
开发框架 前端开发 UED
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多
【4月更文挑战第30天】在Flutter移动应用开发中,下拉刷新和上拉加载更多能提升用户体验和用户参与度。通过`RefreshIndicator`组件和`ScrollController`实现下拉刷新与上拉加载。`RefreshIndicator`包裹可滚动Widget,`ScrollController`监听滚动事件以判断是否到达底部。性能优化包括避免重复加载、使用防抖技术和异步加载数据。参考Flutter官方文档和相关教程可进一步学习。
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多