Flutter ListView 换行，下拉刷新，下拉加载更多...

介绍 Flutter 的 ListView。只要通过数据查询方法和绘图方法，就可以勾勒出ListView的轮廓了。它还支持下拉刷新和拖动加载更多。

前三张图片：refresh_list_view.dart//ListView封装，

list_view_item.dart// ListView_view_demo.dart //ListView使用方法

github记录：github.com/damengzai/f…

1。 fresh_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：1 下拉样式中的Refresh元素包含一个可以打字的小元素。当子类别下拉时，会出现一个圆形的刷新图标。当绘制距离足够时，会执行onRefresh，并在onRefresh中更新数据。

当子组件太短无法滚动时，我们需要添加 physicals: const AlwaysScrollableScrollPhysics(),否则下拉刷新、拉多项都会无效。触发。

ListView：itemBuilder用于渲染子项，控制器添加ScrollController用于滚动，监听滚动事件。并添加更多处理，同时ScrollController可以跳转到指定位置，记住滚动位置等。 ()，并使用_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 刷新 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

createListItem是获取列表数据。运行方法（比JAVA更灵活）并自行配置。更容易了。

上面是一个ListView的简单叠加，下拉刷新，上拉加载更多。未来将不断改进，以方便使用。

作者：大萌仔
链接：https://juejin.im/post/5cfdb6155188251bdc78ceaa
来源：作者掘金
。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。