Flutter ListView封裝，下拉重新整理、上拉載入更多

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

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Expanded(
            child: RefreshListView(getListData, createListItem),
          ),],),);}}
複製程式碼

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

以上是一個下拉重新整理、上拉載入更多的ListView的簡單封裝，後續持續優化，方便使用。

微信公眾號：“Flutter入門”