[移动开发]Flutter学习-自定义列表组件（上拉加载、下拉刷新）

参数说明

使用参考

配合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,
      ),
    );
  }

}