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

本文链接：https://blog.youkuaiyun.com/intbird/article/details/103507135

本文介绍了如何在本地配置Nginx以返回接口数据，以便在没有服务器的情况下进行Flutter应用的数据调试。详细讲解了mac OS上安装Nginx、配置nginx.conf以及创建JSON测试数据的步骤。同时，文章探讨了在Flutter中使用RefreshIndicator结合CustomScrollView和SliverList，以及NestedScrollView与ListView实现刷新效果的方法，并提供了相关资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章来自:http://blog.youkuaiyun.com/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