Flutter学习-自定义列表组件（上拉加载、下拉刷新）

参数说明

参数	默认值	说明
DataForm		数据列表[{}……]
FrontHeight	50.0	避置高度，避免搜索栏
pullup		上拉回调函数
dropdown		下拉回调函数
onPressed		单击列表单元组件中使用的回调函数
onTap		单击列表单元组件中使用的回调函数

使用参考

配合GetX的StateMixin一起使用，数据加载后渲染列表页面，可参考：参考链接一

class WaresView extends GetView<WaresController> {   var _scaffoldkey = new GlobalKey<ScaffoldState>();    @override   Widget build(BuildContext context) {     var _focusNode = FocusNode();     var _controller = TextEditingController();     return Scaffold(       key: _scaffoldkey,       endDrawer: drawer,       appBar: AppBar(),       body: ConstrainedBox( //约束盒子           constraints: BoxConstraints.expand(),///不指定高度和宽度时，将整个屏幕覆盖           child: Stack(             alignment:Alignment.center , ////居中指定对齐方法             children: <Widget>[               controller.obx(                 (state) => Center(                   child: MyListView(                     DataForm: controller.dataForm,                     onPressed: (item){print(item);},                     onTap: (id){controller.goDetails(id);},                     dropdown: (){controller.getWaresData();},                     pullup: (){controller.getWaresDataAddPage();},                   ),                 ),                 onError: (err) {return Text('$err');},                 onLoading: Container(                   width: double.infinity,                   height: double.infinity,                   child: Column(                     mainAxisAlignment: MainAxisAlignment.center,                     crossAxisAlignment: CrossAxisAlignment.center,                     children: [                       CircularProgressIndicator(),                       SizedBox(height: 10),                       Text(                         "疯狂加载中...",                         style: TextStyle(color: Colors.blue, fontSize: 16),                       ),                     ],                   ),                 ),               ),               Positioned(                   top: 0.0，///距离顶部18px(在中轴线上，因为Stack放在中间)                   child: MySearchFence(                     backgroundColor: Colors.white,                     onSearch:(value){controller.search.text = value;controller.onInit();},                     rightIcon: Icons.format_list_bulleted,//Icons.flip,                     onIcon:(value){openDrawer();},                   )               ),             ],           ),         ),     );   } }  

效果图

列表组件代码

import 'dart:async'; import 'dart:io'; import 'dart:math'; import 'package:flutter/material.dart';  // 列表聚合上拉加载下拉刷新  class MyListView extends StatefulWidget {   // 传入参数   const MyListView({     Key? key,     required this.DataForm,// 数据列表[{}……]     this.FrontHeight: 50.0, // 避置高度，避免搜索栏     required this.pullup, // 上拉回调函数     required this.dropdown,// 下拉回调函数     required this.onPressed,// 点击回调函数     required this.onTap,// 点击回调函数   }) : super(key: key,);   final List DataForm;   final double FrontHeight;   final ValueChanged<Map> onPressed;   final ValueChanged<int> onTap;   final VoidCallback pullup;//ValueChanged pullup;//   final VoidCallback dropdown;//ValueChanged dropdown;//   @override   State<StatefulWidget> createState() => MyListViewState(); }  // 构建 class MyListViewState extends State<MyListView> {   // 上拉加载回调函数   ScrollController _controller = new ScrollController();   // 上拉加载更多   _loadMore() async {     // 强制休眠 1 秒     await Future.delayed(Duration(seconds: 1));     setState(() {widget.pullup()；     setState((){});   }    @override   void initState() {     // 为滚动控制器增加监控     _controller.addListener(() {       var maxScroll = _controller.position.maxScrollExtent;       var pixel = _controller.position.pixels;       // 加载时锁定       if (_controller.position.pixels ==           _controller.position.maxScrollExtent) {         /// 触发上拉加载更多机制         _loadMore();       }     });    setState((){});
    super.initState();
  }
  @override
  void dispose() {
    // 销毁 滚动控制器 ScrollController
    _controller.dispose();
    super.dispose();
  }

  // 使用了自定义的列表单元组件来构造列表元素 这里也可以使用其他的组件列表来实现，或者分离出来
  _MakeList() {
    List<Widget> theList = [];
    theList = [
      SizedBox(height: widget.FrontHeight,),// 前置高度
    ];
    for(var item in widget.DataForm) {
      theList.add(MyWaresListElement(
        title:item['title'],
        code:item['code'],
        color: Colors.black,
        TfontWeight:FontWeight.w500,// FontWeight.bold,18,
        Tsize:18,
        desc:item['descshow'],// 'The msg is the Desc !',
        dcolor:Colors.black38,// Colors.black38,
        imgpath:item['imgpath'],
        id:item['id'],
        onPressed:(){widget.onPressed(item);},
        onTap:(){widget.onTap(item['id']);},
      ));
    }
    theList.add(SizedBox(height: 50,));
    return theList;
  }

  Future<Null> _onRefresh() async {
    await Future.delayed(Duration(seconds: 1));// 强制休眠 1 秒
    setState(() {widget.dropdown();});
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      color: Colors.blue,//圆圈进度颜色
      displacement: 44.0,//下拉停止的距离
      backgroundColor: Colors.grey[200],//背景颜色
      onRefresh: _onRefresh,
      child: ListView(
        controller: _controller,
        children: widget.DataForm,
      ),
    );
  }

}