文章目錄

• 一、ScrollController 上拉加載更多
• 二、ScrollController 使用流程
• 三、ScrollController 判定滑動到底部
• 四、完整代碼示例
• 五、相關(guān)資源

一、ScrollController 上拉加載更多

---

在 FLutter 中 , 所有的列表都支持設(shè)置一個 ScrollController 類型的參數(shù) ,

設(shè)置 ScrollController , 用于控制上拉加載更多內(nèi)容 ;

class ListView extends BoxScrollView {ListView({Key? key,Axis scrollDirection = Axis.vertical,bool reverse = false,ScrollController? controller, // 滾動控制器 , 監(jiān)聽上拉加載更多 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 對象添加監(jiān)聽器 , 一般情況下 , 在 initState 方法中執(zhí)行該操作 , 相應(yīng)的在 dispose 方法中 , 執(zhí)行 ScrollController 對象的 dispose 方法 ;

@overridevoid initState() {/// 為滾動控制器添加監(jiān)聽_scrollController.addListener(() {});super.initState();}

最后 , 在 ListView 列表組件中設(shè)置 controller 屬性 ;

/// 列表組件 child: ListView(controller: _scrollController, /// 設(shè)置上拉加載更多children: _buildList(), ),

三、ScrollController 判定滑動到底部

---

調(diào)用 _scrollController.position.pixels 可以獲取當(dāng)前滾動的像素點(diǎn) ;

調(diào)用 _scrollController.position.maxScrollExtent 可以獲取當(dāng)前最大可滾動位置 ;

如果上述兩個值相等 , 那么說明已經(jīng)滾動到列表最底部了 , 此時可以執(zhí)行上拉加載更多

/// 為滾動控制器添加監(jiān)聽_scrollController.addListener(() {/// _scrollController.position.pixels 是當(dāng)前像素點(diǎn)位置/// _scrollController.position.maxScrollExtent 當(dāng)前列表最大可滾動位置/// 如果二者相等 , 那么就觸發(fā)上拉加載更多機(jī)制if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {/// 觸發(fā)上拉加載更多機(jī)制_loadMore();}});

加載更多方法 :

/// 上拉加載更多_loadMore() async {/// 強(qiáng)制休眠 1 秒await Future.delayed(Duration(seconds: 1));/// 更新 UI , 再次復(fù)制一份數(shù)據(jù) , 放入到集合中setState(() {/// 復(fù)制一份 NAMES 集合List<String> nameList = List<String>.from(NAMES);/// 再次將 NAMES 集合合并到被復(fù)制的集合中/// 此時該集合中就會出現(xiàn)兩個 NAMES 集合nameList.addAll(NAMES);NAMES = nameList;});}

四、完整代碼示例

---

import 'package:flutter/material.dart';var NAMES = [ '宋江', '盧俊義', '吳用', '公孫勝', '關(guān)勝','林沖', '秦明', '呼延灼', '花榮', '柴進(jìn)' ];/// 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();@overridevoid initState() {/// 為滾動控制器添加監(jiān)聽_scrollController.addListener(() {/// _scrollController.position.pixels 是當(dāng)前像素點(diǎn)位置/// _scrollController.position.maxScrollExtent 當(dāng)前列表最大可滾動位置/// 如果二者相等 , 那么就觸發(fā)上拉加載更多機(jī)制if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {/// 觸發(fā)上拉加載更多機(jī)制_loadMore();}});super.initState();}@overridevoid dispose() {/// 銷毀 滾動控制器 ScrollController_scrollController.dispose();super.dispose();}/// 上拉加載更多_loadMore() async {/// 強(qiáng)制休眠 1 秒await Future.delayed(Duration(seconds: 1));/// 更新 UI , 再次復(fù)制一份數(shù)據(jù) , 放入到集合中setState(() {/// 復(fù)制一份 NAMES 集合List<String> nameList = List<String>.from(NAMES);/// 再次將 NAMES 集合合并到被復(fù)制的集合中/// 此時該集合中就會出現(xiàn)兩個 NAMES 集合nameList.addAll(NAMES);NAMES = nameList;});}@overrideWidget build(BuildContext context) {/// 材料設(shè)計主題return MaterialApp(home: Scaffold(appBar: AppBar(/// 標(biāo)題組件title: Text("ListView 示例"),),/// 下拉刷新組件body: RefreshIndicator( /// 設(shè)置下拉刷新組件onRefresh: _onRefresh,/// 列表組件child: ListView(controller: _scrollController, /// 設(shè)置上拉加載更多children: _buildList(),),),),);}/// 下拉刷新回調(diào)方法Future<Null> _onRefresh() async {/// 強(qiáng)制休眠 1 秒await Future.delayed(Duration(seconds: 1));/// 更新狀態(tài)setState(() {/// 將 List 元素翻轉(zhuǎn)NAMES = NAMES.reversed.toList();});return null;}/// 創(chuàng)建列表List<Widget> _buildList(){/// 遍歷 NAMES 數(shù)組/// 調(diào)用 map 方法遍歷數(shù)組元素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),),);} }

執(zhí)行結(jié)果 : 在下面的數(shù)組中 , ‘柴進(jìn)’ 是最后一個元素 , 下拉到最后一個元素 , 會觸發(fā)復(fù)制當(dāng)前數(shù)組 , 添加到后面 , 然后更新列表 , 可以加載更多元素 ;

var NAMES = [ '宋江', '盧俊義', '吳用', '公孫勝', '關(guān)勝','林沖', '秦明', '呼延灼', '花榮', '柴進(jìn)' ];

五、相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強(qiáng)烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實(shí)用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實(shí)戰(zhàn)電子書 : https://book.flutterchina.club/chapter1/
• Dart 語言練習(xí)網(wǎng)站 : https://dartpad.dartlang.org/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_listview ( 隨博客進(jìn)度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/21611041 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。