flutter SmartRefresher+ListView组合，为listview添加headview和footerview

最新推荐文章于 2024-05-29 23:18:43 发布
最新推荐文章于 2024-05-29 23:18:43 发布
阅读量1.5w 收藏 5
点赞数 1
分类专栏： Flutter开发 文章标签： flutter SmartRefresher Flutter listview添加头部 listview添加头部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xudailong_blog/article/details/98969929
版权
老实说，这个坑就比较大了，搞了一个上午跟下午两小时，还好算是解决掉了。

先上图：

实现效果图：

在这里插入图片描述
主要是上面的头是用两个Container进行包裹起来的，然后下面用了一个listview，总的加上了一个SmartRefresher这个玩意（pull_to_refresh）控件，之前的文章有提到过。

然后再看下GIF图。

在这里插入图片描述

这里用SingleChrildView嵌套SmartRefresher还是用SmartRefresher嵌套SingleChirldView都是不可行的，因为SmartRefrsher上面有说了。

你用法错了，ListView只能放在SmartRefresher里的child里，因为我内部机制就是判断child是不是ScrollView，是的话取slivers,不是就封一个slivertoboxadapter,你这里相当于scrollable嵌套了。

在github的这个链接地址：

最低0.47元/天 解锁文章
xudailong_blog
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Flutter列表组件ListView
01-20
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件...
Flutter中ListView 的使用示例
08-27
下面是 Flutter 中 ListView 的使用示例，通过这个示例，我们可以了解如何使用 ListView 显示 JSON 数据，并实现网络请求和加载菊花的功能。 知识点一：Material 库 在 Flutter 中，Material 库是一个基本的 UI ...
Flutter的SmartRefresher
star_nwe的博客
04-23 2672
SmartRefresher是一个可以自定义下拉刷新和上拉加载的 Flutter 组件，它继承自 StatefulWidget，并实现了 RefreshIndicator 接口。下面我们来看一下 SmartRefresher 的源代码实现。 首先，我们来看一下 SmartRefresher的构造函数：
Flutter开发之ListView添加HeaderView和FooterView（38）
沐雨07的专栏
07-23 6488
参考文章：Flutter ListView如何添加HeaderView和FooterView flutter的ListView添加HeaderView和FooterView有两种方式： 使用CustomScrollView + SliverToBoxAdapter + SliverList； 参考RecyclerView的实现方式，定义不同类型的Item，如果想保持HeaderViewItem滚...
Flutter 中的 SliverToBoxAdapter 小部件：全面指南
最新发布
smileKH的博客
05-29 466
Flutter 是一个流行的 UI 框架，它提供了多种灵活的组件来构建丰富和交互式的用户界面。在 Flutter 的滚动和布局组件中， 是一个特殊的小部件，它允许将 嵌入到 中，与其他 类型的组件一起使用。本文将为您提供一个全面的指南，介绍如何在 Flutter 应用中使用 小部件。 是一个转换适配器，它将一个常规的 （如 、 等）转换成一个 ，这样就可以在 中使用它。这个组件非常有用，因为它提供了一种方法，将非滚动的布局组件集成到滚动视图中。使用 通常涉及以下几个步骤：导入 Flutter 包
Flutter ListView如何添加HeaderView和FooterView
weixin_34233421的博客
04-01 437
做过Android开发的同学知道，Android的ListView提供addHeaderView和addFooterView两个方法用于添加View到ListView；RecyclerView则通过定义不同的ItemType区分HeaderViewItem和普通的ListItem，在Adapter中加上逻辑判断返回对应的ViewHolder，处理起来还是有点麻烦的。而flutter的ListVie...
flutter刷新页面_Flutter 页面下拉刷新和上拉加载
weixin_35648203的博客
12-23 631
flutter_easyrefresh正如名字一样，EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件。它的功能与Android的SmartRefreshLayout很相似，同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer，但是它并没有局限性，你可以很轻松的自定义。使用Flutter...
Flutter开发之ListView添加HeaderView和FooterView-2（39）
沐雨07的专栏
10-11 491
参考文章：RecyclerView添加HeaderView和FooterView 接着Flutter开发之ListView添加HeaderView和FooterView-1 继续研究。 通过RecyclerView添加来HeaderView和FooterView。
Flutter 基础控件 ListView
小小熊的博客
09-26 128
Flutter 基础控件 ListView 简单使用 /// ListView 简单案例 class ListViewDemo extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: <Widget>[ ...
android使用flutter的ListView实现滚动列表的示例代码
08-26
Android 使用 Flutter 的 ListView 实现滚动列表的示例代码 Android 使用 Flutter 的 ListView 可以轻松实现滚动列表的功能。滚动列表是一种常见的 UI 组件，例如头条、微博等 App 都会使用滚动列表来展示大量数据...
Flutter ListView 上拉加载更多下拉刷新功能实现方法
08-25
下面我们将介绍如何在 Flutter 中实现 ListView 的上拉加载更多和下拉刷新功能。 一、下拉刷新 在 Flutter 中，可以使用 RefreshIndicator 组件来实现下拉刷新的功能。下拉刷新的原理是当用户下拉列表时，触发刷新...
Flutter之下拉刷新和上拉加载
一花一世界 一叶一菩提
10-09 1043
一、下拉刷新 在Flutter中有一个RefreshIndicator，它是一个下拉刷新的widget，通过它我们可实现列表的下拉刷新的操作。 二、上拉加载 在Flutter中有一个ScrollController 列表支持设置controller参数，通过ScrollController监听列表滚动的位置,来实现加载更多的功能。 demo： import 'package...
Flutter ListView 用法详解
weixin_33744854的博客
04-13 1729
ListView的4种构造方式 默认构造函数（传入 List children） ListView( children: <Widget>[ ListTile(title: Text("普通ListView")), ListTile( title: Text("ListView.buil...
flutter SmartRefresher 报错重复使用问题Don‘t use one refreshController to multiple SmartRefresher
zqwily的博客
09-28 2582
Don't use one refreshController to multiple SmartRefresher flutter
Android 使用 Flutter 的第一行代码 -----ListView
qq_39836064的博客
03-22 163
api：https://flutterchina.club/get-started/codelab/ 我接触Android 正儿八经的第一行代码就时listView ，没想到 flutter 的第一个 demo 也是有关 listView 的，哈哈哈 先上代码 import 'package:flutter/material.dart'; import 'package:englis...
Flutter滚动悬浮效果
流星雨的博客
01-19 2947
Flutter滚动悬浮效果
android smartRefresh下拉刷新和上拉加载
Anthonybuer的博客
12-10 651
参照:https://github.com/scwang90/SmartRefreshLayout 1.远程依赖  compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.5.1' 2.布局中使用 &lt;com.scwang.smartrefresh.layout.SmartRefreshLayout android:id=...
用flutter代码实现 listview的数据点击添加到另一个listview中
04-20
好的，这是一个技术问题，我很乐意为您解答。您可以使用Flutter中的ListView和GestureDetector组件来实现这个功能。具体实现可以参考以下代码示例： ``` import 'package:flutter/material.dart'; class MyList extends StatefulWidget { @override _MyListState createState() => _MyListState(); } class _MyListState extends State<MyList> { List<String> _listData = ["Apple", "Banana", "Cherry", "Durian"]; List<String> _selectedData = []; void _onListItemTap(int index) { setState(() { _selectedData.add(_listData[index]); }); } @override Widget build(BuildContext context) { return Column( children: <Widget>[ Expanded( child: ListView.builder( itemCount: _listData.length, itemBuilder: (BuildContext context, int index) { return GestureDetector( onTap: () => _onListItemTap(index), child: Container( padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), child: Text(_listData[index]), ), ); }, ), ), SizedBox(height: 16.0), Text("Selected Items:"), SizedBox(height: 8.0), Expanded( child: ListView.builder( itemCount: _selectedData.length, itemBuilder: (BuildContext context, int index) { return Container( padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), child: Text(_selectedData[index]), ); }, ), ), ], ); } } ``` 在这个示例中，我们先创建了一个包含数据的ListView组件，并使用GestureDetector监听每个列表项的点击事件，当列表项被点击时，我们将其对应的数据添加到另一个ListView组件中。这个处理过程是通过_onListItemTap()函数实现的。 如有需要，您可以根据具体业务需求进行代码细节的调整和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值