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 程式設計開發」微信公眾號 。
