Flutter学习日记之实现上拉加载&下拉刷新的Listview

Posted 2022-11-29 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/120943613，转载需附上此链接

每一个闪闪发光的人都在背后熬过了一个又一个不为人知的黑夜

大家好，我是小黑，一个还没秃头的程序员~~~

又是一年1024，祝大家程序员节快乐，忙的没时间写博客，但是今天也得抽空冒个泡，分享一下学习笔记，今天记录的是自定义一个带有下拉刷新和上拉加载更多的ListView，不需要第三方库，使用自带组件RefreshIndicator以及ScrollController实现,效果如图：

直接上代码：

import 'package:flutter/material.dart';

import 'LoadListener.dart';

/// 带刷新和下拉的listview
class RefreshListView extends StatelessWidget
  final int? itemCount;
  final IndexedWidgetBuilder itemBuilder;
  final List<Widget>? children;
  final RefreshCallback? onRefresh;
  final OnLoadmore? onLoadmore;
  final ScrollController _controller = ScrollController();
  final loadmoreEnable;
  final refreshEnable;
  final Widget? emptyView;

// listview的属性
  final Axis scrollDirection;
  final bool reverse;
  final bool? primary;
  final bool shrinkWrap;
  final EdgeInsetsGeometry? padding;
  final bool addAutomaticKeepAlives;
  final bool addRepaintBoundaries;

  RefreshListView(
    this.children,
    this.itemCount,
    required this.itemBuilder,
    this.onRefresh,
    this.onLoadmore,
    this.loadmoreEnable = true,
    this.refreshEnable = true,
    this.emptyView,
    this.scrollDirection = Axis.vertical,
    this.reverse = false,
    this.primary,
    this.shrinkWrap = false,
    this.padding,
    this.addAutomaticKeepAlives = true,
    this.addRepaintBoundaries = true,
  ) 
    assert(children != null || (itemCount != null && itemBuilder != null));
  

  bool _onNotification(ScrollNotification notification) 
    if (notification is ScrollEndNotification && loadmoreEnable == true) 
      if (_controller.position.maxScrollExtent > 0 &&
          _controller.position.maxScrollExtent == _controller.offset) 
        onLoadmore!();
      
    
    return true;
  

  @override
  Widget build(BuildContext context) 
    Widget child;
    if (children != null) 
      child = ListView(
        scrollDirection: scrollDirection,
        reverse: reverse,
        primary: primary,
        shrinkWrap: shrinkWrap,
        padding: padding,
        addAutomaticKeepAlives: addAutomaticKeepAlives,
        addRepaintBoundaries: addRepaintBoundaries,
        physics: const AlwaysScrollableScrollPhysics(),
        controller: _controller,
        children: children!,
      );
     else if (itemCount != null && itemCount! > 0 || emptyView == null) 
      child = ListView.builder(
        scrollDirection: scrollDirection,
        reverse: reverse,
        primary: primary,
        shrinkWrap: shrinkWrap,
        padding: padding,
        addAutomaticKeepAlives: addAutomaticKeepAlives,
        addRepaintBoundaries: addRepaintBoundaries,
        physics: const AlwaysScrollableScrollPhysics(),
        controller: _controller,
        itemCount: itemCount ?? 0,
        itemBuilder: itemBuilder,
      );
     else 
      child = onRefresh != null
          ? InkWell(
              child: emptyView,
              onTap: () 
                onRefresh!();
              )
          : emptyView ?? Container();
    
    if (onRefresh != null && refreshEnable) 
      child = RefreshIndicator(
        child: child,
        onRefresh: onRefresh!,
      );
    
    if (onLoadmore != null) 
      child = NotificationListener(
        child: child,
        onNotification: _onNotification,
      );
    
    return child;
  

typedef OnLoadmore();

使用如下：

 @override
  Widget build(BuildContext context) 
    return RefreshListView(
      itemCount: _list.length,
      itemBuilder: (context, index) 
        return Column(
          children: [
            buildSlidable(context, index),
            Divider(
              color: ColorUtils.color_grey_dd,
              height: 1,
              thickness: 1,
            )
          ],
        );
      ,
      onRefresh: () async 
        loadData();
        return;
      ,
    );
  

其他属性和listview中使用差不多，这里就不细说了，感兴趣的可以去我往期的博客Flutter学习日记之初识ListView组件中了解ListView组件的使用，要是觉得有用的话别忘了点赞+关注，你们的支持会是我学习的动力，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读，大家晚安！