Flutter ListView封裝，下拉刷新、上拉加載更多

? 封裝了Flutter的ListView，只要傳遞請求數據的方法和繪制item的方法進去就可以繪制ListView，同時支持下拉刷新、上拉加載更多。

主要三個文件：refresh_list_view.dart//封裝的ListView，

list_view_item.dart//ListView的子item渲染view

refersh_list_view_demo.dart//封裝的ListView使用方法

github地址：github.com/damengzai/f…

1. refresh_list_view.dart

? 可以下拉刷新、上拉加載更多的ListView

@override Widget build(BuildContext context) { return RefreshIndicator(child: ListView.builder(itemCount: items.length,itemBuilder: (context, index) {if (widget.listItemView is Function) {return widget.listItemView(index, items[index]);}},physics: const AlwaysScrollableScrollPhysics(),controller: _scrollController,),onRefresh: _handleRefresh);} 復制代碼

? RefreshIndicator：一個Material風格的下拉刷新組件，包含一個可滾動的子組件，當子組件下拉是會有一個圓形刷新圖標，當下拉距離足夠的時候，會觸發onRefresh，而在onRefresh中會去刷新數據。

當子組件太短而不能滾動的時候，需要添加physics: const AlwaysScrollableScrollPhysics(),否則下拉刷新和上拉加載更多都無效，無法觸發了。

? ListView：itemBuilder用于渲染子item，controller添加一個ScrollController，用于響應滾動事件，監聽滾動到底部，做加載更多處理，同時ScrollController可以跳轉到指定位置，記住滾動位置等。

@override void initState() {super.initState();_loadMore();_scrollController.addListener(() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {//滾動到最后請求更多_loadMore();}}); } 復制代碼

? 在初始換state中首先通過_loadMore()獲取數據，同時使用_scrollController監聽滾動滾動的位置，當滾動到最底部的時候，會觸發加載更多數據的方法。

//加載更多 Future _loadMore() async {if (!isLoading) {if(this.mounted) {setState(() {//通過setState去更新數據isLoading = true;});}}List moreList = await mockHttpRequest();if (this.mounted) {setState(() {items.addAll(moreList);isLoading = false;});} } 復制代碼

? 加載更多的方法，模擬了一個網絡請求，當有數據返回的時候，通過setState將數據更新回state中，實現UI的刷新。下拉刷新的方法類似，不做過多介紹。

2. list_view_item.dart

@override Widget build(BuildContext context) {return Card(color: Colors.white,elevation: 4.0,child: Padding(padding: const EdgeInsets.fromLTRB(8.0, 30.0, 8.0, 30.0),child: Text(this.title,style: new TextStyle(color: Colors.blue,fontSize: 20,),),),);} 復制代碼

? 不做過多介紹，可以根據自己的需要定制UI，現在只顯示了一個TextView。

3.refresh_list_view_demo.dart

@overrideWidget build(BuildContext context) {return new Scaffold(body: new Column(children: <Widget>[new Expanded(child: RefreshListView(getListData, createListItem),),],),);}} 復制代碼

? getListData、createListItem分別是獲取數據和渲染子item的方法，傳遞方法進去(比JAVA靈活多了)自己定制更靈活。

以上是一個下拉刷新、上拉加載更多的ListView的簡單封裝，后續持續優化，方便使用。

微信公眾號：“Flutter入門”

總結

以上是生活随笔為你收集整理的Flutter ListView封装，下拉刷新、上拉加载更多的全部內容，希望文章能夠幫你解決所遇到的問題。

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