Provider是谷歌新推出的一个Flutter状态管理的解决方案。
当然状态管理的解决方案相当的多： Scope， Redux, Stream, Bloc,RxDart 等。
本文通过以下四点来介绍以下Provider的使用，相对于其他的状态管理方案，Provider可以说要简单的多的多。
1. 引用
2. 创建Model
3. 将Model和View建立联系
4. 通过Provider获取到Model，进而进行相关的操作
引用
在 pubspec.yaml 中添加： provider: ^3.1.0 ， 版本号换成自己想要的即可。包地址： https://pub.dev/packages/provider#-readme-tab-
创建一个用来管理书籍列表的model，通过接口请求书本列表，然后显示出来
class Book with ChangeNotifier {
List<BookResponseData> _bookList;
List<BookResponseData> get bookList => _bookList;
/// 请求接口获取图书列表
loadBookList() async {
var httpClient = new HttpClient();
var uri = new Uri.https('www.apiopen.top', '/novelApi');
var request = await httpClient.getUrl(uri);
var response = await request.close();
var responseBody = await response.transform(utf8.decoder).join();
// 将获取到的字符串转换成定义好的Book实体类
BookResponseEntity entity =
BookResponseEntity.fromJson(json.decode(responseBody));
_bookList = entity.data;
// 接口返回图书列表后 发送一个通知，通知UI刷新
notifyListeners();
}
@override
void dispose() {
super.dispose();
}
}
通过ChangeNotifierProvider将Model和View建立联系
void main() => runApp(ChangeNotifierProvider<Book>(
builder: (context) => Book(),
child: MainPage(),
));
不通版本的provider，这个参数会有一些不通，使用的时候可以直接点进去看构造方法的参数对应填上即可。
通过Provider获取到Model，进而进行相关的操作
获取的方式是通过： Provider.of <T>(context)
完整可以运行的代码如下（model 的代码在上边有）：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'bean/book_response_entity.dart';
import 'model/book_model.dart';
// 通过 ChangeNotifierProvider 将Book这个model和页面Widget建立联系， 这样在Widget中才可以通过Provider.of(context)来找到。
void main() => runApp(ChangeNotifierProvider<Book>(
builder: (context) => Book(),
child: MainPage(),
));
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "",
home: BookListPage(),
);
}
}
/// 书本列表页面
class BookListPage extends StatefulWidget {
@override
_BookListPageState createState() => _BookListPageState();
}
class _BookListPageState extends State<BookListPage> {
@override
void initState() {
super.initState();
// 由于Provider获取对应的Model需要Context，所以不能直接放到initState 中，在initState中context还没有。
WidgetsBinding.instance.addPostFrameCallback((_) {
// 这个是在页面绘制完成后回调， 那个时候肯定是有context 的
Provider.of<Book>(context).loadBookList();
});
}
@override
Widget build(BuildContext context) {
// 直接通过Provider.of 方法获取到对应的model， 通过model来获取数据或者操作数据。 这里是直接获取到 书本列表
List<BookResponseData> list = Provider.of<Book>(context).bookList;
return Scaffold(
appBar: AppBar(
title: Text("provider demo"),
),
body: Container(
child: ListView(
children: list.map((BookResponseData data) {
// 根据bookList这个数据生成对应的ItemView list .
return Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.lightBlue, width: 1.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text(
"${data.bookname}--${data.authorName}",
style: TextStyle(fontWeight: FontWeight.w600),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
alignment: Alignment.centerLeft,
child: Text(data.bookInfo),
),
],
),
);
}).toList(),
),
),
);
}
}
如此， 简单的Provider的使用就说完了。 相比其他几种状态管理方式真的简单的多。
有任何问题，请留言，大家相互讨论解决。
