下拉刷新算是移動端最基本要掌握的知識了，那么flutter中還不會實現(xiàn)，或者在學(xué)習(xí)flutter的兄弟們，或者學(xué)習(xí)中翻車的兄弟，現(xiàn)在就準(zhǔn)備上車了

實現(xiàn)效果

準(zhǔn)備材料
1，示例接口（可用）

import 'http_manager.dart';

class Api {
  static const String baseUrl = "http://interview.jbangit.com/";
 
  static const String NEWS_LIST = "news?page=";

 
  static getNewsList(int page) async {
    return HttpManager.getInstance().request('$NEWS_LIST$page');
  }
}

2,json格式化工具，這個百度下jsonToDartBeanAction插件，操作過于簡單就不說了，在解析Json數(shù)據(jù)會用到

下面準(zhǔn)備開車

image.png

首先按常理地去理解下面幾個思路
一，頁面狀態(tài)分析和顯示
1，首次加載時候的狀態(tài)
2，加載后的狀態(tài)
3，加載完成后的狀態(tài)（這里包括接口返回的各種狀態(tài)，例如沒網(wǎng)絡(luò)）
4，下拉刷新時的狀態(tài)

當(dāng)然還有心細的朋友會覺得這里還有其他狀態(tài)，這個就一一細分了，主要把這里主要把實現(xiàn)的方式和結(jié)果展示，先實現(xiàn)出來增強信心先，剩下的再慢慢細化去優(yōu)化，后續(xù)會有優(yōu)化版下拉刷新。

二，listview的運用還有簡單的布局運用
1，首先理解下flutter加載布局和數(shù)據(jù)刷新方法
2，布局控件的使用 這個自己去敲（手在你身上）
3，網(wǎng)絡(luò)請求的簡單使用

三，上代碼

import 'dart:convert' as convert;

import 'package:flutter/material.dart';
import 'package:flutterhaha/http/api.dart';
import 'package:flutterhaha/untils/log.dart';

import 'list_new.dart';

class PulltorefreshPage2 extends StatefulWidget {
  PulltorefreshPage2({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _PulltorefreshPageState createState() => new _PulltorefreshPageState();
}

class _PulltorefreshPageState extends State<PulltorefreshPage2> {
  ///數(shù)據(jù)列表
  List list = new List();

  ///滑動控制器
  ScrollController _scrollController = new ScrollController();

  ///加載的頁數(shù)
  int curPage = 1;

  ///是否正在加載數(shù)據(jù)
  bool isLoading = false;

  ///初始化數(shù)據(jù)
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    getDtate(); //首次獲取數(shù)據(jù)
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        print('滑動到了最底部');
        getDtate(); //上拉加載更多
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('下拉刷新'),
      ),
      body: RefreshIndicator(
        onRefresh: _onRefresh,


        ///刷新時執(zhí)行這個方法
        child: ListView.builder(
          itemBuilder:(context, i) => _buildItem(i),
          itemCount: list.length,
          controller: _scrollController,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  getDtate([bool update = true]) async {
    var data = await Api.getNewsList(curPage);

    print(convert.jsonEncode(data));
//    UntilsLogss.e(data);

    if (data != null) {
      var datas = data['data'];
//
//      ///文章總數(shù)
//      totalCount = map["pageCount"];
//
      if (curPage == 1) {
        list.clear();
      }
      curPage++;
      setState(() {
        list.addAll(datas);

      });
    }
  }

  Future<void> _onRefresh() async {
    curPage = 1;

    ///創(chuàng)建一個都完成后的新的Future
    Iterable<Future> futures = [getDtate()];
    await Future.wait(futures);

    setState(() {});
    return null;
  }

  Widget _buildItem(int i) {

    var itemData = list[i];
    return new NewItem(itemData);
  }
}

其中item布局的代碼

import 'package:flutter/material.dart';

class NewItem extends StatelessWidget {
  final itemData;

  const NewItem(this.itemData);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    Column column = new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Text(itemData['title'], style: new TextStyle(fontSize: 16.0))
      ],
    );
    Row row = new Row(

      children: <Widget>[
        new Expanded(child:new Text( itemData['desc'],
          maxLines: 3,
          overflow: TextOverflow.ellipsis,)),
//        new Text(
//          itemData['desc'],
//          maxLines: 3,
//          overflow: TextOverflow.ellipsis,
//        ),
        new Image(
          image: NetworkImage(
            itemData['image'],),
          width: 100.0,
        )

      ],
    );
    return new Card(
      elevation: 4.0,
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          column,
          row,
        ],
      ),
    );
  }

}

認(rèn)真看下上面的東西基本可以理解這整個過程了，對于入門的朋友們，尤其是剛從Android的那邊過來的兄弟應(yīng)該一看就會了，畢竟我也加了不少的注釋在上面?？赡苡行┡笥堰€沒下載Json解析插件的，在這里我也是直接解析出來。

看到這里的證明也上車了，有啥不懂 歡迎留言交流，準(zhǔn)備下一趟了