首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter ListView 局部刷新数据、ListView点赞收藏

中 Item 局部数据刷新的效果,如下图所示。...答案为 是的,在这里模拟了100条数据,但是这里使用的是懒加载模式构建的,所以实际绘制出来的 Item 并不是 100 条,如下图所示: [在这里插入图片描述] 滑动时,滑出屏幕外的,超出ListView...ListView 每一个子 Item 都是一个独立的 StatefulWidget ,都对应的是一个 独立的 State ,所以调用 setState方法来刷新只是刷新了当前的 StatefulWidget...中,这样也能实现ListView 中一个Item中不同的Widget 刷新不同的区域。...widget.bean.isCollect; ///刷新页面显示 setState(() { }); 在这一步修改数据,看下图你就明白了 [在这里插入图片描述] ListView 的子Item

4K41
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ListView下拉刷新与加载更多

    下拉刷新 ---- 在Flutter中系统已经为我们提供了google material design的刷新效果,我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新,下面们还是先来看下如何使用吧...可以看到,当我们下拉刷新结束后我们ListView的数据总数变成了40条。 接下来我们来修改下刷新进度的颜色与背景颜色再来看下效果。 ?...当然,这个下拉刷新不是仅仅只能用在ListView中的,其他的组件都可以使用这个的。 下面我们就来介绍下如何实现ListView的上拉加载更多吧。...然后修改ListView,使得itemCount数目加1,当是最后一条时显示加载中的View,不是最后一条显示正常的Widget 好吧,我们还是来看下效果: ?...实现起来也很简单,只是替换下加载更多的Item而已 当然,其他的效果大家可以根据自己的需要去自己实现哦 当然,上面的下拉刷新和加载更对可以同时用在一个ListView上面,这里就不再贴代码了,大家自己在下面试下

    2.5K20

    Android ListView优化之局部刷新(更新)(非notifyDataSetChanged)

    在Android开发中我们经常会用到listview的数据和界面刷新动作,我们每次可能会用到的都是Adapter.notifyDataSetChanged()方法。...这个方法的原理是利用观察者模式对我们的数据源进行监听,当我们的数据源发生变化的时候,会调用Adapter的getView()方法进行整个界面的刷新。...这样的话我们发现,getview()会调用多次,刷新了好多个不需要刷新的item,这样的话相对而言,降低了效率。但是,我们有的情况下是只需要对某个item的数据进行刷新就可以了。...局部刷新方法一:更新对应view的内容 这种方法先通过listView.getChildAt(position)拿到要更新的对应的item布局文件,然后再通过findViewById找到对应的控件进行设置...局部刷新方法三:调用一次getView()方法 这种方法是调用适配器对应的getView方法,用它里面的代码对界面进行刷新。

    2.5K20

    【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )

    文章目录 一、下拉刷新组件 二、下拉刷新代码示例 三、相关资源 一、下拉刷新组件 ---- 使用 Flutter 提供的 RefreshIndicator 组件 , 可以实现下拉刷新的功能 ; 使用 RefreshIndicator...组件包裹 ListView 组件 ; 在 RefreshIndicator 构造函数中 , 设置 onRefresh 参数 , 为其设置其下拉刷新回调事件 , 当用户下拉刷新时 , 会回调该方法 ;...李应', '朱仝', '鲁智深', '武松', '董平', '张清', '杨志', '徐宁', '索超', '岱宗', '刘唐', '李逵', '史进', '穆弘' '雷横' ]; /// ListView...MaterialApp( home: Scaffold( appBar: AppBar( /// 标题组件 title: Text("ListView.../// 列表组件 body: RefreshIndicator( onRefresh: _onRefresh, child: ListView

    2K20

    Android ListView滚动条配置完全解析

    滚动条的相关显示效果 先来看下ListView的滚动条有哪些显示效果。 滚动条自身的外观 这点不用说,就是滚动条自身的颜色,形状等。...Track的外观 默认的ListView是没有设置Track的。为了了解Track的含义,先看一张设置了Track之后的ListView效果。这是一个红色的Track。...可以看到在设置了Track之后在右侧滚动条下面出现一个贯穿整个ListView可见区域的红色线条。所以Track表示的是滚动条滑动时的”轨道”。...滚动条的大小 ListView是垂直滚动条,它的大小就是滚动条的宽度。 滚动条的显示位置 滚动条出现在ListView左边,还是右边,以及是显示在内侧还是外侧。...在XML中自定义ListView滚动条 自定义ListView滚动条可以直接在布局文件中对ListView进行配置。 先看下ListView在XML中有哪些和滚动条相关的配置选项。

    1.4K20

    ListView中实现部分刷新的两种方法

    ListView在开发中用到的地方非常多,我们经常是全部刷新来更新数据,如果只需要更新某一条数据,该怎么实现呢?...我在项目中使用过以下两种方法: 1.通过点击的位置,获取需要刷新那一列对应的控件,然后在控件上显示新的数据。 2.通过点击的位置,在数据源上移除对应位置的数据,并且重新设置新的数据,然后刷新。...先看一下效果图 假如我们点击第二条数据里面的刷新按钮,变成下面的效果 下面我们看一下这个简单示例的代码: public class MainActivity extends Activity...v.getTag(); //更新ItemView updateItemView(position); //重新设置数据源来实现更新一条数据...mListView; public void setListView(ListView listView){ mListView = listView; }

    1.2K20

    WPF 解决 ListView 的滚动条不显示

    本文告诉大家如何解决一个诡异的问题,如果有一个 ListView 同时里面的元素的高度很长,但是滚动条就是不显示,怎么让这个滚动条显示 本文不属于小白博客,忽略所有的业务环境和样式问题以及对 ScrollViewer...的设置问题 在开始发现这个问题请先看 ListView 的滚动条,通过继承 ListView 或 ListBox 可以在 Load 事件拿到滚动条,需要判断 ScrollViewer 的 ExtentHeight...这样的原理是滚动条是否出现是通过判断 ScrollableHeight 或 ScrollableWidth 的值,但是这个值是通过判断内容的长度或宽度减去显示的长度宽度如果显示的内容大于内容就不显示。...CanContentScroll 已经设置为 false 这样 ExtentHeight 就是内容的长度 通过 ScrollViewer.Content 可以知道 ExtentHeight 和 ExtentWidth 这个在 ListView...源代码 · ScrollViewer ---- 本文会经常更新,请阅读原文: https://lindexi.gitee.io/post/WPF-%E8%A7%A3%E5%86%B3-ListView

    4.2K30

    FlatList ListView SectionList 下拉刷新 上拉加载 彻底解决

    有点: 支持上拉和下拉刷新 不用做任何标志位标志上拉下拉 支持无更多数据功能 支持代码使其自动下拉刷新(场景:第一次页面加载完毕,自动下拉) 内容超过屏幕,距离滑动到底部 30 单位,自动回调上拉 待完善...根据需求 仔细想想还是给个使用 demo 吧 /// 使用此刷新 FlatList 不用考虑刷新的状态和控制刷新的状态。...方法,主动刷新 /// 以实现进入此界面时,主动下拉刷新 beginRefresh={begin=>this.begin...MJRefresh或者项目中自己的刷新组件(自定义刷新组件)。...更改为 MJRefresh 后,刷新效果和原生一样。 刷新修改后,真的还能看出来是 RN 还是原生APP吗?

    4K30

    Flutter-ListView组件下拉刷新+滚动底部加载+缓存封装

    Flutter的ListView组件,虽然很好用,但是数据量大的时候,在低配置的机器上会奇卡无比,所以我封装了一个ListView组件,对数据进行截断,并使用 keframe 插件进行流畅性优化,提升低配置设备的用户体验...+滚动到底部自动加载的ListView组件(返回数据定义复杂是方便局部刷新) class CacheTableList extends StatefulWidget { List tableList...fontSize: 15, color: Colors.black38, fontWeight: FontWeight.bold), ), ) : ListView.builder...注意高度设定需符合要求 createList: (index) { return FrameSeparateWidget(//使用keframe进行单帧动画优化,提升低配置设备流畅性。...列表内容5","列表内容6"]; CacheTableList( createList: (index) { return FrameSeparateWidget(//使用 keframe 进行单帧动画优化

    73010

    【Flutter 专题】图解 ListView 下拉刷新与上拉加载 (一)

    和尚上次学 ListView 时,只学习了一下异步请求数据加载新闻和 Loading 等待的小知识点,但对于新闻列表数据的更新和加载更多是必不可少的,而实现【下拉刷新】与【上划加载更多】的方式有很多种...并同步 packages get; 在相应的 .dart 文件中添加引用 import 'package:flutter_refresh/flutter_refresh.dart'; 数据加载时暂时不用 ListView...变更为 new Refresh,和尚主要是处理 onHeaderRefresh 下拉刷新 和 onFooterRefresh 底部刷新 两个方法中的数据处理。...ScrollController controller, ScrollPhysics physics}) { return new Container( child: new ListView.builder...问题一:初始化进入页面后,加载完第一页之后刷新数据不加载,第二次刷新数据才加载,且加载的是上一次刷新的数据?

    1.7K31

    Android ListView下拉上拉刷新:设计原理与实现「建议收藏」

    《Android ListView下拉/上拉刷新:设计原理与实现》 Android上ListView的第三方开源的下拉刷新框架很多,应用场景很多很普遍,几乎成为现在APP的通用设计典范,甚至谷歌官方都索性在...每一种ListView下拉刷新的开源框架,基本功能相同,设计原理大同小异,下拉刷新的功能实现,其中一个设计实现的的方案核心要点大多集中在ListView的OnScrollListener()等事件的重写上...,然后刷新ListView,这种设计方案也比较常见。...本文则介绍一个可以自动感知ListView下拉到底、然后可自动加载更多的支持下拉/上拉刷新的ListView。...的第一个item,编号为0)刷新抑或上拉见底(底,ListView的最后、最尾部的一个元素)刷新。

    97220
    领券