经过前面几期的学习，关于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 组件 ; 在 RefreshIndicator 构造函数中 , 设置 onRefresh 参数 , 为其设置其下拉刷新回调事件 , 当用户下拉刷新时 , 会回调该方法 ;...{ const RefreshIndicator({ Key?...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 回调，预测和处理潜在的错误至关重要，比如网络问题或者服务错误，这些会在拉取新数据时候发生。
在使用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 //通知数据集变化
我们可以通过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的动态修改。
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
和尚前段时间整理了两种 ListView 的异步加载数据时，下拉刷新与上滑加载更多的方式，每种方式都有自己的优势，网上也有很多大神讲解过 ListView 数据流的种种处理方式，和尚根据实际遇到的情况整理一下尝试的第三种方案...RefreshIndicator 下拉刷新 Flutter 提供了自带刷新效果的 RefreshIndicator，这也是网上大神们用的最多的 Widget 之一，使用方式也很简单，RefreshIndicator...中提供了一个刷新的回调入口 onRefresh，仅需在该回调接口中处理数据请求即可，如下： // 刷新时数据请求 Future _loadRefresh() async { await...( child: ListView.builder( itemCount: items.length, itemBuilder: buildListData(...优化二：第一次初始化加载数据时添加 loading 动画 RefreshIndicator 中自带刷新的动画，所以和尚只是在第一次加载数据时添加一个 loading 动画，和尚只是填了一个小小的状态判断
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(),
，在 listview 外面包裹一层 RefreshIndicator，然后在 RefreshIndicator 里面实现 onRefresh 方法。...refresh() async { final Completer<Null completer = new Completer<Null (); _dataList.clear(); // 清空数据...setState(() { page = 1; }); loadData(completer); // 加载数据 return completer.future; } 加载更多需要对...ListView 进行监听，所以需要进行监听器的设置，在 State 中进行监听器的初始化。...item]); } ) ) 2、使用上述的 Listener 来监听，通过 Listener 的 onPointerMove（手指在屏幕上滑动）来监听滑动的距离，当滑动到底部时加载更多数据
// 回调 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...滑动控制器(上拉刷新和下拉更新) 3.1：滑动控制器ScrollController的使用 class _ListViewPageState extends State {.../略同... ); } } 复制代码 3.2:上拉刷新 内置组件:RefreshIndicator,包裹一下即可 return RefreshIndicator(child...: show, onRefresh: _onRefresh//使用RefreshIndicator } bool isLoading = false; Future _onRefresh(
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 {//下拉刷新
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( /// 设置下拉刷新组件
当监测到最后一条数据，又满足在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
但实际在编写过程中却出了问题 ：ListView 中的 OnItemSelectedListener 没有从 ListView 中接收回调。出现问题并不可怕，可怕的是对问题视而不见的态度。...onNothingSelected 当视图不可见或者数据源为空时会触发该方法。...// AdapterView void handleDataChanged() { // 1、获取待新选中的位置 // 2、如果选中的位置与之前的位置是同一个位置，就不触发视图更新了...2.3.2、mDataChanged的取值 当数据变更或者失效的时候都会引起mDataChanged值的变更。...至少在ListView中 OnItemSelectListener是用于接收焦点的变化的。
2018.05.07 更新 上拉加载可以不用Notification,直接用ScrollController,代码如下: _scrollController.addListener(() {...思路是得到滑动的偏移量，跟ListView总的高度进行比对。那么得得到滑动的偏移量和ListView的总高度这两个值，在源码里面找了很久后，发现根本得不到ListView的内容高度。只能自己计算。...但是发现了另一个数据。...body: new NotificationListener( onNotification: _onNotification, child: new RefreshIndicator...notification is ScrollUpdateNotification) { // 当没去到底部的时候，maxScrollExtent和offset会相等，可以准确的判断到达底部还有多少距离时开始加载数据了
下拉刷新 ---- 在Flutter中系统已经为我们提供了google material design的刷新效果，我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新，下面们还是先来看下如何使用吧...构造方法： 那么我们还是结合ListView的使用来看下举个例子 首先我们还是先来回顾下ListView的用法，我们使用ListView.builder来创建了一个ListView使用 List.generate...可以看到，当我们下拉刷新结束后我们ListView的数据总数变成了40条。 接下来我们来修改下刷新进度的颜色与背景颜色再来看下效果。 ?...在ListView中有一个ScrollController属性，它就是专门来控制ListView滑动事件，在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理。...小结 ---- RefreshIndicator可以显示下拉刷新 使用ScrollController可以监听滑动事件，判断当前view所处的位置 可以根据item所处的位置来处理加载更多显示效果
1.主Activity 1 public class MainActivity extends Activity { 2 3 private ListView listView; 4...super.onCreate(savedInstanceState); 12 setContentView(R.layout.main); 13 14 listView...=(ListView) super.findViewById(R.id.listview); 15 //cache=new File(Environment.getExternalStorageDirectory...().getAbsolutePath()+"/cache"); 16 17 //开一条子线程加载网络数据 18 Runnable runnable=new...中 69 listView.setAdapter(adapter); 70 } 71 72 } 2.从网络中获取xml文件并解析数据 1 public class
但是ViewModel就需要考虑了，因为MVVM一个很重要的特性就是双向绑定，Model中数据的更新会及时的反馈到View上，View上的更新也会及时的反馈给Model。...这样实际上outStoryList会收到数据回调，而这就到了View层了，我们来看一下View层的实现。 View View层这里就只用看实现ListView这个部分即可。...注释(2)处，这里是获取到数据后，构建随之更新widget的方法。snapshot.data就是监听的数据，更新后的新数据。...主要就是引入了StreamWidget，StreamBuilder，然后更新了一下ViewModel和View的数据绑定方式，总体来说还是比较简单的。...，然后对更新的数据做相关的操作。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
