Flutter 入门与实战（六）：给列表增加下拉刷新和上滑加载更多功能

return List<Map<String, Object>>.generate(size, (index) {
return {
‘title’: ‘标题${index + (page - 1) * size + 1}：这是一个列表标题，最多两行，多处部分将会被截取’,
‘imageUrl’:
‘https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3331308357,177638268&fm=26&gp=0.jpg’,
‘viewCount’: 180,
};
});
}

调用的时候，使用 await即可获取实际结果数据，如下所示：

// _currentPage 为当前页码，PAGE_SIZE为分页大小
List<Map<String, Object>> _newItems =
await DynamicMockData.list(_currentPage, PAGE_SIZE);

引入 flutter_easyrefresh

flutter 需要引入第三方插件时，需要在 pubspec.yaml 文件下的dependencies节点下增加依赖，撰写本文时flutter_easyrefresh的最新版为2.2.1，因此指定版本如下：

dependencies:
flutter:
sdk: flutter

cupertino_icons: ^1.0.2
flutter_easyrefresh: ^2.2.1

添加完依赖后，需要在项目目录执行 flutter pub get 命令更新依赖（VSCode 在检测到 pubspec.yaml变化时会自动拉取）。

使用 flutter_easyrefresh

对上一篇中的列表（Flutter 入门与实战（五）：来一个图文并茂的列表）进行改造，分为如下三个步骤：

• 将页面修改为有状态组件，方便支持管理数据和根据数据更新界面
• 使用 EasyRefresh 包裹列表组件，并指定 onRefresh 和 onLoad 回调方法，以响应下拉刷新和上滑加载更多的动作。
• 根据当前分页获取数据，并更新到列表数据中，再调用 setState 更新状态数据刷新界面。

整个新的 dynamic_page 的代码如下所示：

import ‘package:flutter/material.dart’;
import ‘package:flutter_easyrefresh/easy_refresh.dart’;
import ‘dynamic_item.dart’;
import ‘dynamic_mock_data.dart’;

class DynamicPage extends StatefulWidget {
DynamicPage({Key key}) : super(key: key);

@override
_DynamicPageState createState() => _DynamicPageState();
}

class _DynamicPageState extends State {
List<Map<String, Object>> _listItems = [];
int _currentPage = 1;
static const int PAGE_SIZE = 20;

void _refresh() async {
_currentPage = 1;
_requestNewItems();
}

void _load() async {
_currentPage += 1;
_requestNewItems();
}

void _requestNewItems() async {
List<Map<String, Object>> _newItems =
await DynamicMockData.list(_currentPage, PAGE_SIZE);
this.setState(() {
if (_currentPage > 1) {
_listItems += _newItems;
} else {
_listItems = _newItems;
}
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: EasyRefresh(
onRefresh: () async {
_refresh();
},
onLoad: () async {
_load();
},
child: ListView.builder(
itemCount: _listItems.length,
itemBuilder: (context, index) {
return DynamicItem(
_listItems[index][‘title’],
_listItems[index][‘imageUrl’],
_listItems[index][‘viewCount’],
);

尾声

评论里面有些同学有疑问关于如何学习material design控件，我的建议是去GitHub搜，有很多同行给的例子，这些栗子足够入门。

有朋友说要是动真格的话，需要NDK以及JVM等的知识，首现**NDK并不是神秘的东西，**你跟着官方的步骤走一遍就知道什么回事了，无非就是一些代码格式以及原生/JAVA内存交互，进阶一点的有原生/JAVA线程交互，线程交互确实有点蛋疼，但平常避免用就好了，再说对于初学者来说关心NDK干嘛，据鄙人以前的经历，只在音视频通信和一个嵌入式信号处理（离线）的两个项目中用过，嵌入式信号处理是JAVA->NDK->.SO->MATLAB这样调用的我原来MATLAB的代码，其他的大多就用在游戏上了吧，一般的互联网公司会有人给你公司的SO包的。
至于JVM,该掌握的那部分，相信我，你会掌握的，不该你掌握的，有那些专门研究JVM的人来做，不如省省心有空看看计算机系统，编译原理。

一句话，平常多写多练，这是最基本的程序员的素质，尽量挤时间，读理论基础书籍，JVM不是未来30年唯一的虚拟机，JAVA也不一定再风靡未来30年工业界，其他的系统和语言也会雨后春笋冒出来，但你理论扎实会让你很快理解学会一个语言或者框架，你平常写的多会让你很快熟练的将新学的东西应用到实际中。
初学者，一句话，多练。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！