flutter provider跨組件狀態共享的簡單使用
provider是對InheritedWidget進行封裝的，官方介紹有簡化資源分配，懶加載，創建新類時減少大量的模板代碼，支持DevTools,提升類的可擴展性，整體監聽架構時間復雜度以及指數增長，還可以呼叫InheritedWidget對于InheritedWidget自行搜索了解
先加依賴
provider: ^6.0.1
下面是一個可以依賴多個模型，并且可以重繪UI的列子
然后假裝這你要共享的模型
class ProviderModels with ChangeNotifier {
int name = 1;
void changeName() {
name++;
notifyListeners();
}
}
provider有八種提供者，如果是使用provider的話他的模型是不需要繼承ChangeNotifier ，因為他只會修改值，并不會修改UI，
然后創建共享資料
@override
Widget build(BuildContext context) {
//依賴多個模型使用MultiProvider
return MultiProvider(
providers: [
//這個就是無法重繪UI的提供者providerData不需要繼承ChangeNotifier
Provider(create: (context) => providerData()),
//這是我們要用到的可以重繪UI的
ChangeNotifierProvider<ProviderModels>(
create: (_) => ProviderModels()),
],
child: MaterialApp(.....));
}
MultiProvider是依賴多個模型使用，如果只需要一個提供者（Provider或者ChangeNotifierProvider或者是其他）可以直接使用，下面用Provider舉個栗子
列如：
final name= 48;
Provider<int>.value(
value: name,
child: ......,
),
接下來使用方式
Consumer<ProviderModels>(
builder: (BuildContext context, value, Widget? child) {
//value就是ProviderModels
return Text(value.name.toString());
},
),
也可以直接用
child: Text(Provider.of<ProviderModels>(context).name.toString())
Consumer是封裝好的，使用起來更加方便，看看下面原始碼大家就明白了
/// {@template provider.consumer.constructor}
/// Consumes a [Provider<T>]
/// {@endtemplate}
Consumer({
Key? key,
required this.builder,
Widget? child,
}) : super(key: key, child: child);
/// {@template provider.consumer.builder}
/// Build a widget tree based on the value from a [Provider<T>].
///
/// Must not be `null`.
/// {@endtemplate}
final Widget Function(
BuildContext context,
T value,
Widget? child,
) builder;
@override
Widget buildWithChild(BuildContext context, Widget? child) {
return builder(
context,
Provider.of<T>(context),
child,
);
}
最后就是修改資料的時候
final models = Provider.of<ProviderModels>(context);
.....
onTap: (index) {
models.changeName();
},
了解到他的原因是我在專案中使用EventBus的，但是EventBus是通過觀察者模式來實作跨組件狀態共享的，訂閱者必須需顯式注冊狀態改變回呼，也得在組件銷毀的時候手動去解綁啥的，還需要定義很多事件，就很麻煩，provider的話他可以使UI和咱們的頁面邏輯分離，個人感覺比EventBus更好用
最后謝謝jimi文章的幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/390659.html
標籤：其他
下一篇：IPv6與VoIP(第二部分)