import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; void main() => runApp(Myapp()); class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MyHome());
}
} class MyHome extends StatefulWidget {
@override
_MyHomeState createState() => _MyHomeState();
} class _MyHomeState extends State<MyHome> {
final _suggestions = <WordPair>[];
bool _loading = true;
ScrollController _strollCtrl = ScrollController(); Future<void> _getData() async {
await Future.delayed(Duration(seconds: 1));
setState(() {
_suggestions.addAll(generateWordPairs().take(15));
_loading = false;
});
} @override
void initState() {
_getData();
_strollCtrl.addListener(() {
if (_strollCtrl.position.pixels == _strollCtrl.position.maxScrollExtent) {
if (!_loading) {
setState(() {
_loading = true;
});
}
_getData();
}
});
super.initState();
} @override
void dispose() {
_strollCtrl.dispose();
super.dispose();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView'),
),
body: Stack(
children: <Widget>[
_loading
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RefreshProgressIndicator(
semanticsLabel: 'loading more..',
semanticsValue: 'loading more..',
),
Text(
'加载中...',
style: Theme.of(context).textTheme.title,
),
],
),
)
: Container(),
// 下拉加载更多组件
RefreshIndicator(
onRefresh: () async {
_suggestions.clear();
return _getData();
},
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(), // 确保滚动视图始终可滚动
controller: _strollCtrl,
itemCount: _suggestions.length,
itemBuilder: (context, i) {
return ListTile(
leading: Text('${(i + 1).toString()}'),
title: Text('${_suggestions[i].asPascalCase}'),
trailing: Icon(Icons.event),
);
},
),
),
],
),
);
}
}

Flutter: 下拉刷新,上拉加载更多的更多相关文章

  1. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  2. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  3. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  6. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  7. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  8. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  9. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  10. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

随机推荐

  1. loj1011愤怒的牛

    题目描述 原题来自:USACO 2005 Feb. Gold 农夫约翰建造了一座有 n 间牛舍的小屋,牛舍排在一条直线上,第 i 间牛舍在 x_i 的位置,但是约翰的 m 头牛对小屋很不满意,因此经常 ...

  2. poj2631

    求一棵树的直径,所谓直径就是树上距离最远的两个点! 树形动归,每个点的为根的子树的最长向下链和次长链的和! 当然也可以二次深搜! ----------------------------------- ...

  3. 虚函数表-C++多态的实现原理

    目录 1.说明 2.虚函数表 3.代码示例 参考:http://c.biancheng.net/view/267.html 1.说明 我们都知道多态指的是父类的指针在运行中指向子类,那么它的实现原理是 ...

  4. Language Guide (proto3) | proto3 语言指南(三)默认值

    默认值 解析消息时,如果编码的消息不包含特定的单数元素,则解析对象中的相应字段将设置为该字段的默认值.这些默认值是特定于类型的: string:默认值为空字符串 bytes:默认值为空字节 boole ...

  5. Spring Boot的进阶和高级

    一.Repository接口 二.Repository子接口 三.@Query注解 四.更新及删除操作整合事物 五.CrudRepository接口 六.PagingAndSortingReposit ...

  6. brew更换国内源

    来源:清华大学开源软件镜像站(https://mirror.tuna.tsinghua.edu.cn/help/homebrew/) 替换现有上游 1 # brew 程序本身,Homebrew/Lin ...

  7. KVM (虚拟化网络管理)

    vlan:https://www.cnblogs.com/du-z/p/10802786.html trunk:https://www.cnblogs.com/du-z/p/10804773.html ...

  8. 使用FOR XML PATH实现多行数据合并成一列

    有时为避免循环操作数据库.列表展示等一些原因需要将数据及关联数据批量加载进行集中处理,一种解决办法可以使用FOR XML PATH将多行数据合并成一列,达到字段拼接的效果.例如有两个表, 部门表T_D ...

  9. WPF 之 MultiBinding(多路 Binding)(四)

    一.前言 ​ 有时候 UI 需要显示的信息由不止一个数据来源决定,这时候就需要使用 MultiBinding ,即多路 Binding. ​ MultiBinding 与 Binding 一样均以 B ...

  10. 51Nod - 1632

    B国拥有n个城市,其交通系统呈树状结构,即任意两个城市存在且仅存在一条交通线将其连接.A国是B国的敌国企图秘密发射导弹打击B国的交通线,现假设每条交通线都有50%的概率被炸毁,B国希望知道在被炸毁之后 ...