文章目錄

• 一、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 方法 ;

@overridevoid 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();@overridevoid initState() {/// 為滾動控制器添加監聽_scrollController.addListener(() {/// _scrollController.position.pixels 是當前像素點位置/// _scrollController.position.maxScrollExtent 當前列表最大可滾動位置/// 如果二者相等 , 那么就觸發上拉加載更多機制if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {/// 觸發上拉加載更多機制_loadMore();}});super.initState();}@overridevoid 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;});}@overrideWidget 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 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。