经过前面几期的学习,关于ListView的一些基本用法大概学的差不多了,但是你可能发现了,所有ListView里面要填充的数据都是静态的,但在实际开发中,这些数据往往都是动态变化的,比如数据内容发生改变...、增加几行、或者删除几行,这就涉及到ListView数据的更新问题。...接下来通过一个简单的示例程序来学习ListView的数据更新。...android:layout_height="wrap_content" /> 由于当ListView没有数据时,整个页面一片白,非常难看,所以加了一个文本框,当列表没有数据时提示用户...然后点击添加按钮,在列表中随机添加一些列表项,可以看到列表数据动态更新,如上图右侧所示。 然后再点击更新按钮,可以随机更新列表数据,如下图左侧所示。 ?
要使listView的列表项发生改变时及时显示在UI中,就要更新listView的数据。...两种方法: 方法一: 数据直接在adapter上修改,adapter.add().等方法 方法二: 本质上是listview绑定Adapter,Adapter关联List,因此List变化后导致...Adapter同步变化;再通过调用adapter.notifyDataSetChanged();方法使得listview界面自动更新。..., strName);//适配器,其中 R.layout.xmlforitem是列表中每一项的布局,可以用默认的也可自建,strName则是将数据源绑定到适配器 3、listView.setAdapter...();//调用notifyDataSetChanged();更新适配器,ListView会自动刷新,notifyDataSetChanged()方法可能需要在UI线程中调用,建议自行测试; 6、数据增加可能引起内存变化
一、下拉刷新组件 使用 Flutter 提供的 RefreshIndicator 组件 , 可以实现下拉刷新的功能 ; 使用 RefreshIndicator 组件包裹 ListView 组件 ; 在...{ const RefreshIndicator({ Key?...child: ListView( children: _buildList(), ), ), ), )...Null> _onRefresh() async { /// 强制休眠 1 秒 await Future.delayed(Duration(seconds: 1)); /// 更新状态...( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 : https://download.csdn.net/download/han1202012/21601609 ( 本篇博客的源码快照
Flutter 中的 RefreshIndicator 被设计来配合 ListView 或者其他滚动的挂件使用,通过可视化的反馈和平缓的更新动作来提升用户体验。...在 RefreshIndicator 挂件中的 onRefresh 回调会执行这个方法,确保状态更新,并且 UI 上映射了新数据。...当数据被拉取,setData 使用新数据来更新 UI。 实现 Refresh Indicator 逻辑 Flutter 中的 RefreshIndicator 在用户获取数据过程中提供视觉反馈。...RefreshIndicator 将保持转动直到 Future 被解决,这将发生在新数据准备好并更新了 UI。...错误处理和用户反馈 错误处理是任何与数据源交互功能的重要一点,下来刷新也不例外。当实现 onRefresh 回调,预测和处理潜在的错误至关重要,比如网络问题或者服务错误,这些会在拉取新数据时候发生。
CircularProgressIndicator → 加载中提示 RefreshIndicator → 下拉刷新 setState → 更新 UI 四、网络请求常见坑 ❌ 忘记 await → 页面先渲染空列表...❌ 异步未 try/catch → 崩溃 ❌ build 里直接 await → 页面卡死 ❌ 刷新列表忘记 setState → UI 不更新 建议: 网络请求写在事件或 initState 中...包裹 ListView: RefreshIndicator( onRefresh: loadData, child: ListView.builder( itemCount: _posts.length...你已经学会: Flutter http 请求基本用法 异步获取网络数据 列表展示远程数据 下拉刷新与错误处理 dio 进阶网络请求能力 到这里为止: 你已经可以写出一个“数据动态加载的列表页面” ✅...八、一句话总结 Future / async / await 获取数据 setState 刷新 UI RefreshIndicator + ListView 展示内容 下一篇预告 《Flutter 零基础入门
Pull-to-Refresh 与列表分页 —— 完整列表交互实战 到目前为止,你已经掌握了: 网络请求获取列表数据(http / dio) 异步更新 UI(Future / async / await...一、下拉刷新 RefreshIndicator 1️⃣ 基础用法 RefreshIndicator( onRefresh: _refreshData, child: ListView.builder...$index'); }); } RefreshIndicator 只能包裹可滚动组件(ListView / GridView / SingleChildScrollView) 二、列表分页(上拉加载更多...指定 ScrollController → 上拉监听无效 ❌ setState 内更新列表前没有先判断 mounted → 页面已销毁报错 ❌ 下拉刷新期间又触发上拉 → 数据重复 ❌ 分页数据太大...→ 页面卡顿,可使用 ListView.builder 懒加载 六、本篇你真正掌握了什么?
我们可以通过scrollbars属性来控制ListView的滚动状态。特别的,当scrollbars设置为none时,ListView无论滚动还是不滚动,就都不会出现滚动条了。...case 2:// 隐藏ListView的滚动条 LogUtils.d(position); // false-一直都显示 true-不活动时隐藏...,活动时显示 //listView.setScrollbarFadingEnabled(true); //false 不活动的时候隐藏,活动的时候也隐藏...true-不活动时隐藏,活动时显示 listView.setVerticalScrollBarEnabled(false); // 或者在...Adapter的映射List之后,只需要通过调用Adapter的notifyDataSetChanged方法,通知ListView更改数据源即可完成对ListView的动态修改。
在使用ListView时,会遇到当ListView列表滑动到最底端时,添加新的列表项的问题,本文通过代码演示如何动态的添加新的列表项到ListView中。...实现步骤:调用ListView的setOnScrollListener()方法设置滑动监听器,实现OnScrollListener接口的方法,判断当列表滑动到最低端时,加载新的列表项。...android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 > 7 ListView...import android.widget.AbsListView; 11 import android.widget.BaseAdapter; 12 import android.widget.ListView...数量 73 mAdapter.count += 10; 74 //通知数据集变化
参考文章:dataV组件库——改变数据视图不主动刷新 问题: 拿到后端数值就直接赋值了,但是视图(页面)没有更新。...解决: 官方文档介绍dataV里面的组件props均未设置deep监听,刷新props时,要直接生成新的props对象(基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象(this.someProps...config: { value: 66, lineDash: [10, 2] } } }, methods: { // 更新数据的示例方法...const { config } = this /** * 只是这样做是无效 * config指向的内存地址没有发生变化 * 组件无法侦知数据变化...this.config.value = 90 this.config.lineDash = [10, 4] /** * 使用ES6拓展运算符生成新的props对象 * 组件侦知数据变化
和尚前段时间整理了两种 ListView 的异步加载数据时,下拉刷新与上滑加载更多的方式,每种方式都有自己的优势,网上也有很多大神讲解过 ListView 数据流的种种处理方式,和尚根据实际遇到的情况整理一下尝试的第三种方案...RefreshIndicator 下拉刷新 Flutter 提供了自带刷新效果的 RefreshIndicator,这也是网上大神们用的最多的 Widget 之一,使用方式也很简单,RefreshIndicator...中提供了一个刷新的回调入口 onRefresh,仅需在该回调接口中处理数据请求即可,如下: // 刷新时数据请求 Future _loadRefresh() async { await...( child: ListView.builder( itemCount: items.length, itemBuilder: buildListData(...优化二:第一次初始化加载数据时添加 loading 动画 RefreshIndicator 中自带刷新的动画,所以和尚只是在第一次加载数据时添加一个 loading 动画,和尚只是填了一个小小的状态判断
Flutter里面的ScrollView及其子view都可以添加下拉刷新功能,只要在view的上层再包裹一层RefreshIndicator,这个下拉刷新是MD风格的。...几个要注意的点(以ListView为例) 如果ListView的内容不足一屏,要设置ListView的physics属性为const AlwaysScrollableScrollPhysics() onRefresh...RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey< RefreshIndicatorState>(); body: new RefreshIndicator...,关完成这个刷新 new Timer(Duration(seconds: 3), () { // 添加数据,更新界面 setState(() { list.add...("新加数据${list.length}"); }); // 完成刷新 completer.complete(null); }); return
context that does not include a Navigator 解决办法:不能直接在new MaterialApp中调用Navigator.of(context).push() RefreshIndicator...在ListView条目较少时不触发下拉刷新 RefreshIndicator是根据下拉时的偏移量触发刷新,当条目较少时(未占满一个屏幕),ListView不能滚动,所以无法触发下拉刷新,给ListView...的physice属性设置值为new AlwaysScrollableScrollPhysics(),让ListView在任何情况下都可以滑动,也就可以触发RefreshIndicator的刷新。...Widget listView = new ListView.builder ( //注意这里physics physics: new AlwaysScrollableScrollPhysics(),
// 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 // 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡...组件 ---- RefreshIndicator 组件常用于下拉刷新操作 ; RefreshIndicator 组件构造函数 : 构造函数的可选参数中展示了其可以设置的参数 ; class RefreshIndicator...显示的内容 child: ListView( children: [ Container( // 对应底部导航栏设置选项卡...// 刷新指示器组件 RefreshIndicator( // 显示的内容 child: ListView( children...flutterchina.club/faq/ ( 入门阶段推荐看一遍 ) 博客源码下载 : GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新
1.ListView 的基本使用 ListView 是一个盛放多个孩子的容器。...的使用 在构造器构造条目时,使用数据对条目进行数据填充,侧达到数据展示效果 var data = []; for (var i = 0; i < 20; i++) { data.add(PoemItem...滑动控制器(上拉刷新和下拉更新) 3.1:滑动控制器ScrollController的使用 class _ListViewPageState extends State { ScrollController.../略同... ); } } 3.2:上拉刷新 内置组件:RefreshIndicator,包裹一下即可 return RefreshIndicator(child: show..., onRefresh: _onRefresh//使用RefreshIndicator } bool isLoading = false; Future _onRefresh() async {//下拉刷新
1.ListView 的基本使用 ListView 是一个盛放多个孩子的容器。...的使用 在构造器构造条目时,使用数据对条目进行数据填充,侧达到数据展示效果 var data = []; for (var i = 0; i < 20; i++) { data.add...滑动控制器(上拉刷新和下拉更新) 3.1:滑动控制器ScrollController的使用 class _ListViewPageState extends State {.../略同... ); } } 复制代码 3.2:上拉刷新 内置组件:RefreshIndicator,包裹一下即可 return RefreshIndicator(child...: show, onRefresh: _onRefresh//使用RefreshIndicator } bool isLoading = false; Future _onRefresh(
extends BoxScrollView { ListView({ Key?...UI , 再次复制一份数据 , 放入到集合中 setState(() { /// 复制一份 NAMES 集合 List nameList = List<...垂直列表 /// RefreshIndicator 下拉刷新 /// ScrollController 上拉加载更多 void main() { runApp(MyApp()); } class...UI , 再次复制一份数据 , 放入到集合中 setState(() { /// 复制一份 NAMES 集合 List nameList = List<...示例"), ), /// 下拉刷新组件 body: RefreshIndicator( /// 设置下拉刷新组件
但实际在编写过程中却出了问题 :ListView 中的 OnItemSelectedListener 没有从 ListView 中接收回调。出现问题并不可怕,可怕的是对问题视而不见的态度。...onNothingSelected 当视图不可见或者数据源为空时会触发该方法。...// AdapterView void handleDataChanged() { // 1、获取待新选中的位置 // 2、如果选中的位置与之前的位置是同一个位置,就不触发视图更新了...2.3.2、mDataChanged的取值 当数据变更或者失效的时候都会引起mDataChanged值的变更。...至少在ListView中 OnItemSelectListener是用于接收焦点的变化的。
当监测到最后一条数据,又满足在100条数据以下,显示loading动画布局,并去网络获取数据,获取到数据之后插入到结束标记之前。超过100条数据,显示没有更多了。 3.2....下拉刷新,上拉加载更多"), ), body: RefreshIndicator( onRefresh: _toRefresh,...ThemeData(primaryColor: Colors.deepOrangeAccent), home: RefreshListViewDemo(), )); } 关键步骤分解: 使用RefreshIndicator...,包裹ListView。...body: RefreshIndicator( onRefresh: _toRefresh, child: ListView.separated( 在onRefresh里传入_toRefresh
下拉刷新 ---- 在Flutter中系统已经为我们提供了google material design的刷新效果,我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新,下面们还是先来看下如何使用吧...构造方法: 那么我们还是结合ListView的使用来看下举个例子 首先我们还是先来回顾下ListView的用法,我们使用ListView.builder来创建了一个ListView使用 List.generate...可以看到,当我们下拉刷新结束后我们ListView的数据总数变成了40条。 接下来我们来修改下刷新进度的颜色与背景颜色再来看下效果。 ?...在ListView中有一个ScrollController属性,它就是专门来控制ListView滑动事件,在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理。...小结 ---- RefreshIndicator可以显示下拉刷新 使用ScrollController可以监听滑动事件,判断当前view所处的位置 可以根据item所处的位置来处理加载更多显示效果
2018.05.07 更新 上拉加载可以不用Notification,直接用ScrollController,代码如下: _scrollController.addListener(() {...思路是得到滑动的偏移量,跟ListView总的高度进行比对。那么得得到滑动的偏移量和ListView的总高度这两个值,在源码里面找了很久后,发现根本得不到ListView的内容高度。只能自己计算。...但是发现了另一个数据。...body: new NotificationListener( onNotification: _onNotification, child: new RefreshIndicator...notification is ScrollUpdateNotification) { // 当没去到底部的时候,maxScrollExtent和offset会相等,可以准确的判断到达底部还有多少距离时开始加载数据了