Provider 基本使用
在之前的一篇文章中,介绍了 Provider 的基本使用,总结一下,Provider 的基本使用总结如下 :
- 定义数据 model 管理变量
- 通过 ChangeNotifierProvider 将状态和需要使用的状态的组件组合到一起
- 使用 Provider.of 或者 Consumer 监听状态或者改变状态。
当然如果是在一个 widget 或者页面里面需要使用多个状态, ChangeNotifierProvider 显然是不够的,因此 Provider 提供了 MultiProvider 来使用多个状态,像这样
MultiProvider(
providers: [
ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
FutureProvider(builder: (_) => UserProvider().loadUserData()),
StreamProvider(builder: (_) => EventProvider().intStream(), initialData:ThemeData.light() )
],
child: MyApp()
)
就可以使用多个状态了。
接下来介绍 Provider 里面另外两个比较重要的 Provider: FutureProvider 和 StreamProvider。 通过名字就看得出来,这两个 Provider 和异步执行有关。更详细的介绍和使用参考这篇文章,如果你不能访问这篇文章也没有关系,接下来我会根据这篇文章来介绍一下这两个 Provider 是如果使用的。
FutureProvider 的使用
FutureProvider 使用起来也很简单。先看一下构造函数:
FutureProvider({
Key key,
@required ValueBuilder<Future<T>> builder,
T initialData,
ErrorBuilder<T> catchError,
UpdateShouldNotify<T> updateShouldNotify,
Widget child,
}) : this._(
key: key,
initialData: initialData,
catchError: catchError,
updateShouldNotify: updateShouldNotify,
delegate: BuilderStateDelegate(builder),
child: child,
);
可以看到,builder 的返回值类型确实是 Future 类型的,并且可以通过 initiaData 指定初始值。接下来具体看一下如何使用。
1、定义 异步操作,返回值类型需要是 Future 类型的
比如读取 assets 下的 json 文件并解析,这肯定是一个耗时的操作,因此需要异步进行。
class UserProvider {
final String _dataPath = "assets/data/users.json";
List<User> users;
Future<List<User>> loadUserData( ) async {
var dataString = await loadAsset();
Map<String, dynamic> jsonUserData = jsonDecode(dataString);
users = UserList.fromJson(jsonUserData['users']).users;
print('done loading user!' + jsonEncode(users));
return users;
}
Future<String> loadAsset() async {
return await Future.delayed(Duration(seconds: 10), () async {
return await rootBundle.loadString('assets/data/users.json');
});
}
}
2、FutureProvider 中指定刚才定义的 UserProvider 并且调用初始化函数。
MultiProvider(
providers: [
ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
FutureProvider(builder: (_) => UserProvider().loadUserData()),
StreamProvider(builder: (_) => EventProvider().intStream(), initialData: 0)
],
child: MyApp()
)
3、使用 Provider.of 获取状态
var _users = Provider.of<List<User>>(context);
接下来就可以通过 users 正常的使用变量了。
ListView.builder(
itemCount: _users.length,
itemBuilder: (context, index){
return Container(
height: 50,
color: Colors.grey[(index*200) % 400],
child: Center(
child: Text(
'${_users[index].firstName} ${_users[index].lastName} | ${_users[index].website}'
)
)
);
}
)
StreamProvider 的使用
其构造函数如下:
StreamProvider({
Key key,
@required ValueBuilder<Stream<T>> builder,
T initialData,
ErrorBuilder<T> catchError,
UpdateShouldNotify<T> updateShouldNotify,
Widget child,
}) : this._(
key: key,
delegate: BuilderStateDelegate<Stream<T>>(builder),
initialData: initialData,
catchError: catchError,
updateShouldNotify: updateShouldNotify,
child: child,
);
和 FuturePrivider 类似,返回值是 Stream 类型的,也可以指定初始值。接下来看如何使用。
1、定义可以返回 Stream 类型的操作
这里只是每隔两秒返回一个数字。
class EventProvider {
Stream<int> intStream() {
Duration interval = Duration(seconds: 2);
return Stream<int>.periodic(interval, (int _count) => _count++);
}
}
2、初始化 StreamBuilder 并启动发送 Stream 的操作
MultiProvider(
providers: [
ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
FutureProvider(builder: (_) => UserProvider().loadUserData()),
StreamProvider(builder: (_) => EventProvider().intStream(), initialData:0)
],
child: MyApp()
)
3、通过 Provider.of 读取状态
var _value = Provider.of<ThemeData>(context);
使用这个状态:
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('StreamProvider Example'),
SizedBox(height: 150),
Text('${_value.toString()}',
style: Theme.of(context).textTheme.display1
)
],
)
)
这样界面上的数字就是每隔两秒钟刷新一次了。
接下来再看一个例子,通过 StreamProvider 来改变主题。 将刚才的 EventProvider 改为如下:
class EventProvider {
Stream<ThemeData> intStream() {
Duration interval = Duration(seconds: 2);
// ThemeData themeData = _themeData == ThemeData.light()?ThemeData.dark():ThemeData.light()
return Stream<ThemeData>.periodic(interval, (int _count) => _count %2 == 0?ThemeData.light():ThemeData.dark() );
//return Stream<int>.periodic(interval, (int _count) => _count %2 == 0? 11: 22 );
// return Stream<int>.periodic(interval, (int _count) => _count++);
}
}
每隔两秒改变一次主题。
初始化 StreamProvider:
MultiProvider(
providers: [
ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
FutureProvider(builder: (_) => UserProvider().loadUserData()),
StreamProvider(builder: (_) => EventProvider().intStream(), initialData:ThemeData.light())
],
child: MyApp()
)
使用 Provider.of 读取状态
return MaterialApp(
title: 'Flutter Demo',
// theme: ThemeData.light(),
// theme: themeData,
theme: Provider.of<ThemeData>(context),
home: DefaultTabController(
length: 3,
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Provider Demo:" ),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.add)),
Tab(icon: Icon(Icons.person)),
Tab(icon: Icon(Icons.message)),
],
),
),
body: TabBarView(
children: [
HomePage(),
MyUserPage(),
MyEventPage(),
],
),
),
)
)
);
效果如下:
最后
欢迎关注「Flutter 编程开发」微信公众号 。