和尚前段时间整理了两种 ListView 的异步加载数据时，下拉刷新与上滑加载更多的方式，每种方式都有自己的优势，网上也有很多大神讲解过 ListView 数据流的种种处理方式，和尚根据实际遇到的情况整理一下尝试的第三种方案...RefreshIndicator 下拉刷新 Flutter 提供了自带刷新效果的 RefreshIndicator，这也是网上大神们用的最多的 Widget 之一，使用方式也很简单，RefreshIndicator...ScrollController 上滑动加载更多 至此，列表的下拉刷新就完成了，接下来处理【上滑加载更多】，这时我们可以借助 ScrollController，用来监听列表是否滑动到底部，主要分两步...: RefreshIndicator( onRefresh: _loadRefresh, child: ListView.builder( itemCount:...优化二：第一次初始化加载数据时添加 loading 动画 RefreshIndicator 中自带刷新的动画，所以和尚只是在第一次加载数据时添加一个 loading 动画，和尚只是填了一个小小的状态判断
], ), ) 设置 RefreshIndicator 挂件 设置 RefreshIndicator 挂件需要使用 RefreshIndicator 包裹你的可滚动的挂件，并且提供一个 Future...RefreshIndicator 挂件应该覆盖在需要刷新的可滚动的内容上。还有很重要的一点需要注意，RefreshIndicator 只在垂直可滚动的 child 上才可工作，。...body: RefreshIndicator( onRefresh: _handleRefresh, child: ListView.builder( itemCount:...是 Scaffold 的 body 值，它有一个 child，包裹着一个 ListView.builder。...包裹着一个 ListView.builder，根据最新的数据动态地构建列表项。
在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...bool innerBoxIsScrolled) { return [SliverAppBar( title: Text('老孟'), )]; }, body: ListView.builder..._tabController, children: [ RefreshIndicator( onRefresh: (){ print...reverse参数表示反转滚动方向，并不是由垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。...：内容超过一屏 上拉有回弹效果 ClampingScrollPhysics ：包裹内容 不会有回弹
1.ListView 的基本使用 ListView 是一个盛放多个孩子的容器。...，和物质的短暂情人，和所有以梦为马的诗人一样，我不得不和烈士和小丑走在同一道路上")); } var show = ListView.builder( padding: EdgeInsets.all...; case ChartType.left: return _buildLeft(); break; } } 3.ListView滑动控制器(上拉刷新和下拉更新.../略同... ); } } 3.2:上拉刷新 内置组件:RefreshIndicator,包裹一下即可 return RefreshIndicator(child: show..., onRefresh: _onRefresh//使用RefreshIndicator } bool isLoading = false; Future _onRefresh() async {//下拉刷新
下拉刷新 Flutter中提供了组件 RefreshIndicator用于下拉刷新。...上拉加载更多 Flutter中主要通过使用 ListView.builder( ) 添加控制器来实现上拉加载更多。...其基本的实现方法是在该组件里添加控制器，在组件初始化时实例化ScrollController类型控制器，然后在初始化的initState( )中，给控制器添加addListener( )监听事件，在事件的回调函数中可以获得滚动的下拉距离及整个页面的高度..._getMoreWidget():RefreshIndicator( child: ListView.builder(..._onRefresh ) ) ); } } 以下是下拉刷新的实现效果： ? 以下是上拉加载的实现效果： ?
1.ListView 的基本使用 ListView 是一个盛放多个孩子的容器。...，和物质的短暂情人，和所有以梦为马的诗人一样，我不得不和烈士和小丑走在同一道路上")); } var show = ListView.builder( padding: EdgeInsets.all...; case ChartType.left: return _buildLeft(); break; } } 3.ListView滑动控制器(上拉刷新和下拉更新.../略同... ); } } 复制代码 3.2:上拉刷新 内置组件:RefreshIndicator,包裹一下即可 return RefreshIndicator(child...: show, onRefresh: _onRefresh//使用RefreshIndicator } bool isLoading = false; Future _onRefresh(
先丢一个github的demo代码地址 移动开发发展到现在，下拉刷新是个必不可少的功能了。...Flutter里面的ScrollView及其子view都可以添加下拉刷新功能，只要在view的上层再包裹一层RefreshIndicator，这个下拉刷新是MD风格的。...几个要注意的点（以ListView为例） 如果ListView的内容不足一屏，要设置ListView的physics属性为const AlwaysScrollableScrollPhysics() onRefresh...RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey< RefreshIndicatorState>(); body: new RefreshIndicator...child: new ListView.builder( // 这句是在list里面的内容不足一屏时，list可能会滑不动，加上就一直都可以滑动
题记 —— 优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维。 *** Flutter是谷歌推出的最新的移动开发框架。...RefreshIndicator 是 Material 风格的滑动刷新Widget ，效果是下拉刷新显示的加载圆圈。...return Scaffold( appBar: AppBar( title: Text("下拉刷新"), ), //下拉刷新组件 body: RefreshIndicator...( //圆圈进度颜色 color: Colors.blue, //下拉停止的距离 displacement: 44.0,...)); //结束刷新 return Future.value(true); }, //一个列表 child: ListView.builder
题纲： SizedBox WillPopScope拦截、监听返回事件 GestureDetector手势监听 RawGestureDetector手势监听 RefreshIndicator上拉加载、下拉刷新控件...bool>_onWillPop() async{ final b = await _navKey.currentState.maybePop(); //返回true：可以在主Router上返回...： Ho0229-Flutter中的手势处理 4.RawGestureDetector手势监听 篇幅有点长单独记录了常用组件--RawGestureDetector 5.RefreshIndicator...上拉加载、下拉刷新控件 final _scrollV = ScrollController(); @override void initState() { super.initState();...返回值为Future onRefresh: dataInit, child: ListView.builder( controller: _scrollV,
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(),...的最终字段中。
下拉刷新 ---- 在Flutter中系统已经为我们提供了google material design的刷新效果，我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新，下面们还是先来看下如何使用吧...构造方法： 那么我们还是结合ListView的使用来看下举个例子 首先我们还是先来回顾下ListView的用法，我们使用ListView.builder来创建了一个ListView使用 List.generate...上拉加载更多 ---- 对于加载更多的组件在Flutter中是没有提供的，所以在这里我们就需要考虑如何实现的。...可以看到，我们仅仅在上面代码的基础上加上了一个isLoading的变量，当这个变量的值为true时，就不会触发加载更多的操作。...小结 ---- RefreshIndicator可以显示下拉刷新 使用ScrollController可以监听滑动事件，判断当前view所处的位置 可以根据item所处的位置来处理加载更多显示效果
2018.05.07 更新 上拉加载可以不用Notification,直接用ScrollController,代码如下: _scrollController.addListener(() {...this.isNoMoreData) { // 滑动到最底部了 _getData(); } }); 以下是原文： 前面讲了 下拉刷新，列表离不开的还有一个上拉加载更多...,今天就来讲一下上拉加载更多在flutter里面如何实现。...body: new NotificationListener( onNotification: _onNotification, child: new RefreshIndicator...( key: _refreshIndicatorKey, onRefresh: _refreshData, child: new ListView.builder
在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator，但是没有提供上拉分页加载更多的组件。...当然，我们是可以找一些第三方的库来实现上拉加载下拉刷新的效果的，比如flutter_easyrefresh这个第三方组件，但是我并不推荐flutter_easyrefresh，因为它有一些小Bug。...所以这篇文章，我们就聊一下，如何自己去实现上拉加载下拉刷新的效果。..._loadMoreWidget() : RefreshIndicator( child: ListView.builder(...1的时候， * 说明当前的ListTile是最后一个ListTile， * 此时需要上拉加载新的数据，因此要在最底部显示一个加载中的圈圈
需求分析： 主页显示动态名字且居中，跳转到抽屉的图标 图片展示，手动切换，指示器，自动轮播，点击可以跳转 整体滑动 ，根据滑动的位置改变主页名字（参考最后演示的GIF） UI拆解并实现： AppBar..._homeBannerHeight, //指示器覆盖在pagerview上，所以用Stack child: new Stack( children: <Widget...widget = _buildDateTimeItem(item); break; } return widget; } content = new ListView.builder...scrollController, itemCount: _normalDatas.length, itemBuilder: _buildItem, ); 拆解4：刷新 var _refreshIndicator...= new NotificationListener( onNotification: _onNotification, child: new RefreshIndicator
下拉刷新 添加一个Material design风格的下拉刷新比较简单，直接给列表包一个RefreshIndicator就可以了 return RefreshIndicator(...//触发的回调 onRefresh: _onRefresh, child: ListView.builder() ) 下拉刷新触发的回调通过onRefresh...下拉刷新 上拉加载更多 Flutter没有系统提供的加载更过控件，这里我们想办法做一个比较粗糙的实现。思路是在列表的末尾添加一个加载控件，当滑动到列表底部的时候触发加载的操作。...这样我们就给列表加了个上拉加载更多的功能。效果如图： ?...上拉加载更多 使用Assets 添加 Assets 在Flutter中如果你有图片等文件需要引入到app中，都需要使用Assets, 这个Assets的概念不同于Android中Assets的概念，某种意义上讲
但是ViewModel就需要考虑了，因为MVVM一个很重要的特性就是双向绑定，Model中数据的更新会及时的反馈到View上，View上的更新也会及时的反馈给Model。...这样实际上outStoryList会收到数据回调，而这就到了View层了，我们来看一下View层的实现。 View View层这里就只用看实现ListView这个部分即可。...onRefresh: () { // (3) return storyListViewModel.refreshStoryList(); }, child: ListView.builder...，我们依次来看注释的5个点 注释(1)处，一个StreamBuilder，在stream参数给上我们ViewModel的output stream，也就是说当ViewModel中的Sink对象被add数据后...注释(3)处，RefreshIndicator是一个下拉刷新的widget，onRefresh方法里调用了刷新方法。
引入依赖 在需要用到的该插件的文件中引入插件包。..._getMoreWidget():RefreshIndicator( child: ListView.builder(...// 上拉加载控制器 controller: _scrollController, itemCount:...以下是点击新闻列表页跳转详情页的代码，这个页面中会用到解析html的插件。...文件的效果图。
[s523e93naj.png] 从上表我们可以看到： Fluuter的 apk 会比 ipa 更小一些，这其中的一部分原因是 Flutter 使用的 Skia 在Android 上是自带的。...这里又有一个细节，rn 的 ipa 包体积小很多，这其实是因为 javascriptcore 在 ios上 是内置的原因。 对上述内容有兴趣的可以看看《移动端跨平台开发的深度解析》。...二、细节 这里主要讲一些小细节 1、AppBar 在 Flutter 中 AppBar 算是常用 Widget ，而 AppBar 可不仅仅作为标题栏和使用，AppBar上的 leading 和 bottom...4、GlobalKey 在Flutter中，要主动改变子控件的状态，还可以使用 GlobalKey。 比如你需要主动调用 RefreshIndicator 显示刷新状态，如下代码所示。...( key: refreshIndicatorKey, onRefresh: onRefresh, child: new ListView.builder(
apk 会比 ipa 更小一些，这其中的一部分原因是 Flutter 使用的 Skia 在Android 上是自带的。...这里又有一个细节，rn 的 ipa 包体积小很多，这其实是因为 javascriptcore 在 ios上 是内置的原因。 对上述内容有兴趣的可以看看《移动端跨平台开发的深度解析》。...二、细节 这里主要讲一些小细节 1、AppBar 在 Flutter 中 AppBar 算是常用 Widget ，而 AppBar 可不仅仅作为标题栏和使用，AppBar上的 leading 和 bottom...4、GlobalKey 在Flutter中，要主动改变子控件的状态，还可以使用 GlobalKey。 比如你需要主动调用 RefreshIndicator 显示刷新状态，如下代码所示。...( key: refreshIndicatorKey, onRefresh: onRefresh, child: new ListView.builder(
由于可滚动组件的默认方向一般都是沿垂直方向，所以默认情况下主轴就是指垂直方向，水平方向同理 SingleChildScrollView SingleChildScrollView 类似于 Android...的 长度为 itemExtent 的值；这里的长度指的是方向上子组件的长度，也就是说滚动的是垂直方向，则 itemnExtent 代表子组件的高度；如果是水平方向，则是子组件的宽度。...，这是一个通用的规律，并非 ListView 自己的特性，想 GridView 也是如此 ListView.builder 这种适合列表项比较多(或者无限) 的情况，因为只有当子组件真正显示的时候才会被创建...，也就是说改构造函数是支持基于 Sliver 的懒加载模型的；下面看一下核心参数: ListView.builder({ // ListView公共参数已省略 ......e.asPascalCase) .toList()); }) }); } } 复制代码 效果如下： 实现下拉刷新 RefreshIndicator
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
