Flutter RefreshIndicator 下拉刷新组件 Material 风格的刷新效果
程序员文章站
2022-04-28 13:27:56
...
题记
—— 优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。
盘点Flutter跨平台APP开发中使用到的进度条
Flutter是谷歌推出的最新的移动开发框架。RefreshIndicator 是 Material 风格的滑动刷新Widget ,效果是下拉刷新显示的加载圆圈。
本文章实现Demo运行效果 如下:
Demo配置如下
///下拉刷新组件
class HomePageRefreshIndicator extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<HomePageRefreshIndicator> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("下拉刷新"),
),
//下拉刷新组件
body: RefreshIndicator(
//圆圈进度颜色
color: Colors.blue,
//下拉停止的距离
displacement: 44.0,
//背景颜色
backgroundColor: Colors.grey[200],
onRefresh: () async {
//模拟网络请求
await Future.delayed(Duration(milliseconds: 2000));
//结束刷新
return Future.value(true);
},
//一个列表
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
height: 66,
child: Text("测试数据"),
);
},
//列表数据源数量
itemCount: 100,
),
),
);
}
}
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
不局限于思维,不局限语言限制,才是编程的最高境界。
以小编的性格,肯定是要录制一套视频的,随后会上传
有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人
本文章 的源码在这里
上一篇: ARouter路由框架
下一篇: WebService使用笔记