文章来自:http://blog.csdn.net/intbird
主要是两个使用方式:
1. RefreshIndicator 包裹 CustomScrollView ( appbar + pindHeader + sliverList)
2. NestedScrollView 包裹 AppBar + RefreshIndicator( ListView)
1.配置本地nginx返回接口数据
方便在没有服务器配合的情况下,单端完成数据调试
1.mac os 下载并配置nginx:
> brew update
> brew search nginx
> brew install nginx
2.软链接nginx文件目录,方便后续修改:
> open /usr/local/Cellar/nginx/ // 查看nginx版本,比如后续的 1.17.6
> ln -s /usr/local/Cellar/nginx/1.17.6/docs /Users/intbird/configs/nginx/docs // 挂载新建的docs目录到指定目录下
> touch /Users/intbird/configs/nginx/docs/index.json // 创建一个默认的json文件,写点东西进去做测试
3.修改nginx配置,配置接口url:
1 > open /usr/local/etc/nginx/
2 写入 nginx.conf 文件如图配置:
3 > sudo nginx // 首次启动nginx
4 如果已经启动则可刷新配置: sudo nginx -s reload ;
停止nginx: sudo nginx -s stop
5 访问nginx地址,配置完成:
附:除了本地插件,也可以在线json转dartbean: https://javiercbk.github.io/json_to_dart/
2,flutter项目 RefreshIndicator + SliverList + ListView 刷新效果
1,页面内容由完全由CustomScrollView实现,列表为SliverList
重点示意:
效果示意:
RefreshIndicator + SliverList 下拉刷新 | RefreshIndicator + SliverList 上拉 |
![]() |
![]() |
/// homepage.dart
void main() => runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
theme:ThemeData(brightness: Brightness.light, primaryColor: Colors.blueGrey),
home: _scaffoldRefreshFromStatusBar()));
Scaffold _scaffoldRefreshFromStatusBar() {
// 下拉刷新完成通知列表数据刷新
SwipeValueNotifierData swipeValueNotifierData =
new Swipe