本地配置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 SwipeValueNotifierData(new List());
  return new Scaffold(
    body: SwipeRefreshContainer(
        // 下拉刷新完成存储最新数据
        swipeValueNotifierData: swipeValueNotifierData,
        swipeRefreshBody: SliverAppBarContainer1(
          //使用最新数据
          swipeValueNotifierData: swipeValueNotifierData,
        )),
    floatingActionButton: _floatingActionButton(),
  );
}

 

///swiper-refresh-container.dart


import 'package:flutter/material.dart';

import 'api/HomePageApi.dart' as api;
import 'api/beans/list_beans_entity.dart';

class SwipeRefreshContainer extends StatefulWidget {
  final Widget swipeRefreshBody;
  final SwipeValueNotifierData swipeValueNotifierData;

  SwipeRefreshContainer(
      {Key key, this.swipeRefreshBody, this.swipeValueNotifierData})
      : super(key: key);

  @override
  State createState() {
    return _CreateState();
  }
}

class _CreateState extends State {
  final GlobalKey _refreshIndicatorKey =
      new GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => _refreshIndicatorKey.currentState.show());
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      key: _refreshIndicatorKey,
      onRefresh: _refresh,
      child: widget.swipeRefreshBody ?? new Text("EMPTY"),
    );
  }

  Future