一种Flutter加载更多的实现方法

最新推荐文章于 2024-07-10 16:40:48 发布

skysukai

最新推荐文章于 2024-07-10 16:40:48 发布

阅读量4k

点赞数 1

分类专栏：心得文章标签： flutter 加载更多 loadmore Listview GridView StaggeredGrid

本文链接：https://blog.csdn.net/skysukai/article/details/90061978

版权

心得专栏收录该内容

7 篇文章 0 订阅

订阅专栏

转载注明出处：https://blog.csdn.net/skysukai

1、why flutter？

我们在进行Android开发的时候，比如布局文件，会创建一个xml来存放布局。写熟悉了觉得没什么，可是，用xml来存放布局文件是十年前的技术了。在十年过后，再用xml来写布局文件运行时在由系统负责渲染看起来有些过时。
关于为什么是flutter，网上有很多讨论，在我看来最重要的应该是大前端的思想。作为一个Android开发者，我们也应该去学习这种先进的思想。

2、背景

项目中有很多ListView、GridView的场景，通常来说，从服务器获取数据都会分页获取。而flutter官方并没有提供一个loadmore控件。这就需要开发者自己实现。先贴出一张效果图：
在这里插入图片描述
网上有一些关于ListView加载更多的实现，无外乎都是判断是否滚动到底，滚动到底之后再加载更多。但是在我们的项目中，不仅有ListView还有GridView、StaggeredGrid（瀑布流）。作为一个懒程序员，我更愿意用一套代码解决这三个控件的加载更多，而不愿意分别为他们都写一套代码。

3、实现

站在巨人的肩膀上才能看得更远，这篇blog给了我莫大的启示，感谢作者。我的加载更多控件姑且叫做LoadMoreIndicator吧。

3.1 总体思路

3.1.1 状态定义

总体来说，我们还是需要判断是否滚动到底。如果滚动到底且还有数据，则加载更多；否则，无更多数据。所以，我们的LoadMoreIndicator至少应该包含IDLE、NOMORE这两个状态，除此之外，应该还有FAIL、LOADING两个状态，分别对应加载失败、正在加载。

3.1.2 监听滚动事件

作为加载更多的实现，如何判断滚动到底？flutter提供了ScrollController来监听滚动类控件，而我最开始也是使用ScrollController来做的，不过后面还是换成了Notification，其中遇到过一个坑，后边再详细说明。有关flutter的notification机制网上有很多介绍，总的来说就是一个flutter的事件分发机制。

3.1.3 如何统一封装

上面提到过，项目里面用到的滚动控件包括ListView、GridView、StaggeredGrid，那这三个不同的控件该如何封装到一起呢？单论这个问题似乎有很多解。再仔细分析项目需求，除了那三个滚动控件之外，可能还需要Appbar用于定义title，也还需要pinnedHeader。能把三个滚动控件统一起来，且还支持Appbar、pinnedHeader的控件只有CustomScrollView了。CustomScrollView包含多个滚动模型，能够处理许多个滚动控件带来的滑动冲突。
那么，LoadMoreIndicator的主体也很清晰了——通过CustomScrollView封装不同的滚动控件，并且处理各种业务场景。

3.2 主体框架

给出一小段代码，说明LoadMoreIndicator的主体：

class LoadMoreIndicator<T extends Widget, K extends Widget>
    extends StatefulWidget {

  /// the Sliver header
  final K header;

  /// the Sliver body
  final T child;

  /// callback to loading more
  final LoadMoreFunction onLoadMore;

  /// footer delegate
  final LoadMoreDelegate delegate;

  /// whether to load when empty
  final bool whenEmptyLoad;

  ///define emptyview or use default emptyview
  final Widget emptyView;
  
  const LoadMoreIndicator({
    Key key,
    @required this.child,
    @required this.onLoadMore,
    this.header,
    this.delegate,
    this.whenEmptyLoad = true,
    this.controller,
    this.emptyView
  }) : super(key: key);

  @override
  _LoadMoreIndicatorState createState() => _LoadMoreIndicatorState();
  
  ……
}
class _LoadMoreIndicatorState extends State<LoadMoreIndicator> {
	……

	/// original widget need to be wrapped by CustomScrollView
	final List<Widget> _components = [];
	
	  @override
	  Widget build(BuildContext context) {
	    /// build header
	    if (childHeader != null) {
	      _components.add(SliverToBoxAdapter(
	        child: childHeader,
	      ));
	    }
	
	    /// add body
	    _components.add(childBody);
	
	    /// build footer
	    _components.add(SliverToBoxAdapter(
	      child: _buildFooter(),
	    ));
	
	    return _rebuildConcrete();
	  }
	  /// build actual Sliver Body
	  Widget _rebuildConcrete() {
	    return NotificationListener<ScrollNotification>(
	      onNotification: _onScrollToBottom,
	      child: CustomScrollView(
	        slivers: _components,
	      ),
	    );
	  }
  bool _onScrollToBottom(ScrollNotification scrollInfo) {
    /// if is loading return
    if (_status == LoadMoreStatus.LOADING) {
      return true;
    }
    /// scroll to bottom
    if (scrollInfo.metrics.extentAfter == 0.0 &&
        scrollInfo.metrics.pixels >= scrollInfo.metrics.maxScrollExtent * 0.8) {
      if (loadMoreDelegate is DefaultLoadMoreDelegate) {
        /// if scroll to bottom and there has more data then load
        if (_status != LoadMoreStatus.NOMORE && _status != LoadMoreStatus.FAIL) {
          loadData();
        }
      }
    }

    return false;
  }
	……
 }

以上这一小段代码就是LoadMoreIndicator最核心代码了，非常简单。只需要把需要封装的控件传递过来，添加header、footer即可。有一个问题是，这样封装的话，滚动控件必须是sliver的实现，如：SliverGrid、SliverList、SliverStaggeredGrid，目前没有想到其他更好的解决办法。loadData（）就是加载更多的实现，一般是连接到服务器获取数据。

3.3 构造footer

在LoadMoreIndicator中，封装完滚动控件之后，最重要的工作就是构造footer了。选中了LoadMoreIndicator代码的主体是Customscrollview之后，其实构造footer也很简单了。SliverToBoxAdapter就是flutter提供的用于封装的其他Widget的控件，只需要把构造的footer用SliverToBoxAdapter再包装一层即可大功告成。给出代码片段：

  Widget _buildFooter() {
    return NotificationListener<_RetryNotify>(
      child: NotificationListener<_AutoLoadNotify>(
        child: DefaultLoadMoreView(
          status: _status,
          delegate: loadMoreDelegate,
        ),
        onNotification: _onAutoLoad,
      ),
      onNotification: _onRetry,
    );
  }

DefaultLoadMoreView用于设置默认的加载更多动画，如果用户没有设置，则使用这个加载效果；否则使用定义过的加载效果。

/// if don't define loadmoreview use default
class DefaultLoadMoreView extends StatefulWidget {
  final LoadMoreStatus status;
  final LoadMoreDelegate delegate;

  const DefaultLoadMoreView({
    Key key,
    this.status = LoadMoreStatus.IDLE,
    @required this.delegate,
  }) : super(key: key);

  @override
  DefaultLoadMoreViewState createState() => DefaultLoadMoreViewState();
}

class DefaultLoadMoreViewState extends State<DefaultLoadMoreView> {
  LoadMoreDelegate get delegate => widget.delegate;

  @override
  Widget build(BuildContext context) {
    notify();
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        if (widget.status == LoadMoreStatus.FAIL ||
            widget.status == LoadMoreStatus.IDLE) {
          /// tap to load
          _RetryNotify().dispatch(context);
        }
      },
      child: Container(
        alignment: Alignment.center,
        child: delegate.buildChild(
          context,
          widget.status,
        ),
      ),
    );
  }
 ……
}

加载动画的实现在DefaultLoadMoreDelegate中，通过代理的模式来设置默认的加载动画：

///default LoadMoreView delegate
class DefaultLoadMoreDelegate extends LoadMoreDelegate {
  @override
  Widget buildChild(BuildContext context, LoadMoreStatus status) {
    switch (status) {
      case LoadMoreStatus.IDLE:
      case LoadMoreStatus.LOADING:
        return LoadingAnimation(blockBackKey: false);
        break;
      case LoadMoreStatus.NOMORE:
        return Center(
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  S.of(context).loadMore_Nomore,
                  style: TextStyle(color: Colors.white),
                ),
              ],
            ),
          ),
        );

        break;
      case LoadMoreStatus.FAIL:
        return Text(
          S.of(context).loadMore_Fail,
          style: TextStyle(color: Colors.white),
        );
        break;
    }

    return null;
  }
}

3.4 其他问题

到这里，基本讲清楚了LoadMoreIndicator的实现思路，还有很多细节问题需要花功夫完善，如：怎么判断是否加载完，没有更多数据？是否可以提供默认的EmptyView？

3.4.1 loadData()的实现

前面已经提到过当判断滚动到底的时候需要触发加载更多，loadData()这个函数怎么实现呢？

  /// notify UI to load more data and receive result
  void loadData() {
    if (_status == LoadMoreStatus.LOADING) {
      return;
    }

    if(mounted) {
      setState(() {
        _updateStatus(LoadMoreStatus.LOADING);
      });
    }

    widget.onLoadMore((int count, int pageNum, int pageSize) {

      if (pageNum * pageSize >= count) {
        _updateStatus(LoadMoreStatus.NOMORE);
      } else {
        _updateStatus(LoadMoreStatus.IDLE);
      }

      if(mounted) {
        setState(() {
          _isEmpty = count == 0;
        });
      }
    }, (int errorCode) {
      _updateStatus(LoadMoreStatus.FAIL);
      if (mounted) {setState(() {});}
    });
  }

在LoadMoreIndicator中滚动到底之后，需要触发真实的页面去请求数据，而不可能在控件里边去完成业务逻辑。在java中可以使用回调接口来完成，再把请求结果传回LoadMoreIndicator，用于更新footer状态。在dart中可以使用typedef来完成相同的功能，即用方法来代替回调接口，这部分不是本文的重点，在此略过。
来看一下LoadMoreIndicator中回调方法的定义：

typedef void LoadMoreOnSuccess(int totalCount, int pageNum, int pageSize);
typedef void LoadMoreOnFailure(int errorCode);
typedef void LoadMoreFunction(LoadMoreOnSuccess success, LoadMoreOnFailure failure);

LoadMoreFunction作为LoadMoreIndicator的一个成员变量，它的实现在具体业务逻辑中。LoadMoreOnSuccess和LoadMoreOnFailure是业务逻辑加载失败或成功的回调，用于通知LoadMoreIndicator更新footer状态。

3.3.2 为什么不能用ScrollController

在LoadMoreIndicator完成之后，能够满足项目中大部门场景，但是在一个场景中，页面不能滚动了。先来看下设计图：
在这里插入图片描述
在这个界面中，有三个页签，每一个页签都要求能够加载更多。flutter提供了NestedScrollView来实现一个滑动头部折叠的动画效果。在NestedScrollView的body中设置TabBarView，即可达到效果。
之前提到，为了监听滚动，一般来说得给控件设置ScrollController来监听，但是NestedScrollView本身自带一个监听，用于处理滚动冲突，并且在NestedScrollView有一段注释：

 // The "controller" and "primary" members should be left
 // unset, so that the NestedScrollView can control this
 // inner scroll view.
 // If the "controller" property is set, then this scroll
 // view will not be associated with the NestedScrollView.
 // The PageStorageKey should be unique to this ScrollView;
 // it allows the list to remember its scroll position when
 // the tab view is not on the screen.

所以，在LoadMoreIndicator只能使用ScrollNotification来监听滚动到底，但是在这样修改之后，理论上能够监听tabbarview的滚动了，实际上，tabbarview还是不能滚动到底，头像依然不能被收起。来看下那个包裹头像的appbar是怎么写的吧：

SliverAppBar(
  pinned: true,
  expandedHeight: ScreenUtils.px2dp(1206),
  forceElevated: innerBoxIsScrolled,
  bottom: PreferredSize(
    child: Container(
    child: TabBar(
      indicatorColor: Colors.red,
      indicatorWeight: ScreenUtils.px2dp(12),
      indicatorPadding: EdgeInsets.only(top: 10.0),
      indicatorSize: TabBarIndicatorSize.label,
      labelColor: Colors.red,
      labelStyle: _tabBarTextStyle(),
      unselectedLabelColor: Colors.white,
      unselectedLabelStyle: _tabBarTextStyle(),
      tabs: _tabTagMap.keys
       .map(
        (String tag) => Tab(
          child: Tab(text: tag),
        ),
       ).toList(),
      ),
      color: Colors.black,
    ),
  preferredSize:
    Size(double.infinity, ScreenUtils.px2dp(192))),
  flexibleSpace: Container(
    child: Column(
      children: <Widget>[
        AppBar(
          backgroundColor: Colors.black,
        ),
        Expanded(
          child: _userInfoHeadWidget(
            context, _userInfo, UserInfoType.my),
          ),
       ],
     ),
   ),
  ),
),

看上去没有什么问题，但是tabbar无论如何不能被收起，后来无意在github上发现，改为以下可实现：

SliverAppBar(
  expandedHeight: ScreenUtils.px2dp(1206),
  flexibleSpace: SingleChildScrollView(
    physics: NeverScrollableScrollPhysics(),
    child: Container(
      child: Column(
        children: <Widget>[
          AppBar(
            backgroundColor: Colors.black,
          ),
          _userInfoHeadWidget(
            context, _userInfo, UserInfoType.my
          ),
        ],
      ),
    ),
  ),

其实思想就是把用户头像appbar的flexiblespace里，同时设置flexiblespace可滚动。这样，tarbar就可以收起了。

4、结语

经过一些踩坑，一个在flutter下的加载更多就完成了。总体来说，flutter的开发是比Android开发效率高。不过，目前还是很不成熟，在Android中一句话可以搞定的事情，在flutter中确不一定。能够做出这个加载更多，也是站在巨人的肩膀上，感谢以下作者给予的启发。
相关参考：https://blog.csdn.net/qq_28478281/article/details/83827699
相关参考：https://juejin.im/post/5bfb9cb7e51d45592b766769
相关参考：https://stackoverflow.com/questions/48035594/flutter-notificationlistener-with-scrollnotification-vs-scrollcontroller
相关参考：https://github.com/xuelongqy/flutter_easyrefresh/blob/master/README.md

skysukai

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一种Flutter加载更多的实现方法

本文介绍了一种Flutter加载更多的实现方法。可以统一封装SliverListview、SliverGridView、SliverStaggeredGrid几种控件，并提供了默认的加载动画、emptyview、errorview等。
复制链接

扫一扫

专栏目录