下拉刷新算是移动端最基本要掌握的知识了，那么flutter中还不会实现，或者在学习flutter的兄弟们，或者学习中翻车的兄弟，现在就准备上车了
实现效果
准备材料
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数据会用到
下面准备开车
image.png
首先按常理地去理解下面几个思路
一，页面状态分析和显示
1，首次加载时候的状态
2，加载后的状态
3，加载完成后的状态（这里包括接口返回的各种状态，例如没网络）
4，下拉刷新时的状态
当然还有心细的朋友会觉得这里还有其他状态，这个就一一细分了，主要把这里主要把实现的方式和结果展示，先实现出来增强信心先，剩下的再慢慢细化去优化，后续会有优化版下拉刷新。
二，listview的运用还有简单的布局运用
1，首先理解下flutter加载布局和数据刷新方法
2，布局控件的使用 这个自己去敲（手在你身上）
3，网络请求的简单使用
三，上代码
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> {
///数据列表
List list = new List();
///滑动控制器
ScrollController _scrollController = new ScrollController();
///加载的页数
int curPage = 1;
///是否正在加载数据
bool isLoading = false;
///初始化数据
@override
void initState() {
// TODO: implement initState
super.initState();
getDtate(); //首次获取数据
_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,
///刷新时执行这个方法
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'];
//
// ///文章总数
// totalCount = map["pageCount"];
//
if (curPage == 1) {
list.clear();
}
curPage++;
setState(() {
list.addAll(datas);
});
}
}
Future<void> _onRefresh() async {
curPage = 1;
///创建一个都完成后的新的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,
],
),
);
}
}
认真看下上面的东西基本可以理解这整个过程了，对于入门的朋友们，尤其是刚从Android的那边过来的兄弟应该一看就会了，毕竟我也加了不少的注释在上面。可能有些朋友还没下载Json解析插件的，在这里我也是直接解析出来。
看到这里的证明也上车了，有啥不懂 欢迎留言交流，准备下一趟了
网友评论