本地配置nginx数据返回给->Flutter RefreshIndicator 和 SliverList ListView 和 CustomScrollView NestedScrollView

文章来自: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