下拉刷新算是移動(dòng)端最基本要掌握的知識(shí)了，那么flutter中還不會(huì)實(shí)現(xiàn)丑瞧，或者在學(xué)習(xí)flutter的兄弟們趾痘，或者學(xué)習(xí)中翻車的兄弟擎颖，現(xiàn)在就準(zhǔ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格式化工具观游，這個(gè)百度下jsonToDartBeanAction插件搂捧，操作過于簡(jiǎn)單就不說了，在解析Json數(shù)據(jù)會(huì)用到
下面準(zhǔn)備開車
首先按常理地去理解下面幾個(gè)思路
一懂缕，頁(yè)面狀態(tài)分析和顯示
1允跑，首次加載時(shí)候的狀態(tài)
2，加載后的狀態(tài)
3搪柑，加載完成后的狀態(tài)（這里包括接口返回的各種狀態(tài)聋丝，例如沒網(wǎng)絡(luò)）
4，下拉刷新時(shí)的狀態(tài)
當(dāng)然還有心細(xì)的朋友會(huì)覺得這里還有其他狀態(tài)工碾，這個(gè)就一一細(xì)分了弱睦，主要把這里主要把實(shí)現(xiàn)的方式和結(jié)果展示，先實(shí)現(xiàn)出來增強(qiáng)信心先渊额，剩下的再慢慢細(xì)化去優(yōu)化况木，后續(xù)會(huì)有優(yōu)化版下拉刷新。
二旬迹，listview的運(yùn)用還有簡(jiǎn)單的布局運(yùn)用
1火惊，首先理解下flutter加載布局和數(shù)據(jù)刷新方法
2，布局控件的使用 這個(gè)自己去敲（手在你身上）
3奔垦，網(wǎng)絡(luò)請(qǐng)求的簡(jiǎn)單使用
三屹耐，上代碼
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();
///滑動(dòng)控制器
ScrollController _scrollController = new ScrollController();
///加載的頁(yè)數(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('滑動(dòng)到了最底部');
getDtate(); //上拉加載更多
}
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('下拉刷新'),
),
body: RefreshIndicator(
onRefresh: _onRefresh,
///刷新時(shí)執(zhí)行這個(gè)方法
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)建一個(gè)都完成后的新的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)真看下上面的東西基本可以理解這整個(gè)過程了，對(duì)于入門的朋友們椿猎，尤其是剛從Android的那邊過來的兄弟應(yīng)該一看就會(huì)了惶岭，畢竟我也加了不少的注釋在上面》该撸可能有些朋友還沒下載Json解析插件的俗他，在這里我也是直接解析出來。
看到這里的證明也上車了阔逼，有啥不懂 歡迎留言交流兆衅，準(zhǔn)備下一趟了
