網站首頁 編程語言 正文
InheritedWidget簡單數據驅動模型
基于InheritedWidget,實現簡單的數據驅動模型,模型結構如下:
1. 數據存儲
使用 InheritedWidget,新建 InheritedProvider
import 'package:flutter/material.dart'; class InheritedProvider<T> extends InheritedWidget { final T data; InheritedProvider({@required this.data, Widget child}) : super(child: child); @override bool updateShouldNotify(InheritedProvider<T> oldWidget) { //在此簡單返回true,則每次更新都會調用依賴其的子孫節點的 didChangeDependencies return true; } }
2. 變更通知
使用flutter自帶的 ChangeNotifier 組件,封裝工具類 ChangeNotifierProvider 用于響應數據變更,觸發UI更新。
class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget { final Widget child; final T data; //共享的數據模型,要求繼承ChangeNotifier const ChangeNotifierProvider({ Key key, this.child, this.data, }) : super(key: key); ///提供方法,子樹獲取共享數據 static T of<T>(BuildContext context) { final provider = context.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>(); return provider.data; } @override _ChangeNotifierProviderState createState() => _ChangeNotifierProviderState<T>(); } class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>> { ///如果數據發生變化(model類調用 notifyListeners),重新構建InheritedProvider void update() { setState(() => {}); } @override void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) { ///當Provider更新時,如果新舊數據不"==",則解綁舊數據監聽,同時添加新數據監聽 if (widget.data != oldWidget.data) { oldWidget.data.removeListener(update); widget.data.addListener(update); } super.didUpdateWidget(oldWidget); } @override void initState() { widget.data.addListener(update); super.initState(); } @override void dispose() { widget.data.removeListener(update); super.dispose(); } @override Widget build(BuildContext context) { return InheritedProvider<T>( data: widget.data, child: widget.child, ); } }
原理:使用InheritedWidget作為父節點,當數據源更新時,數據模型經過ChangeNotifier的關聯,觸發 _ChangeNotifierProviderState 的 setState方法,刷新UI。
封裝 NotifyConsumer 直接顯式調用 ChangeNotifierProvider.of
獲取共享數據語義不明確,我們將其做一層簡單的封裝用于子節點獲取數據:
///響應數據變化的消費者 class NotifyConsumer<T> extends StatelessWidget { final Widget Function(BuildContext context, T value) builder; const NotifyConsumer({Key key, @required this.builder}) : super(key: key); @override Widget build(BuildContext context) { return builder( context, ChangeNotifierProvider.of<T>(context), ); } }
3. 使用方法
創建一個共享數據模型:
///共享數據模型 class CountModel extends ChangeNotifier { int _count = 0; int get count => _count; //提供自增方法 void increase() { _count++; // 通知監聽器(訂閱者),重新構建InheritedProvider, 更新狀態。 notifyListeners(); } }
ChangeNotifierProvider 的使用方式:
import 'package:flutter/material.dart'; import 'package:test_interited/provider/change_notifier_provider.dart'; import 'package:test_interited/provider/notify_consumer.dart'; import 'package:test_interited/provider/test/count_model.dart'; class TestNotifierWidget extends StatefulWidget { const TestNotifierWidget({Key key}) : super(key: key); @override _TestNotifierWidgetState createState() => _TestNotifierWidgetState(); } class _TestNotifierWidgetState extends State<TestNotifierWidget> { @override Widget build(BuildContext context) { return Center( child: ChangeNotifierProvider<CountModel>( data: CountModel(), child: Builder(builder: (context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Builder( builder: (context) { //獲取共享數據源 return NotifyConsumer<CountModel>( builder: (context, value) { return Text(value.count.toString()); }); }, ), Builder(builder: (context) { return RaisedButton( child: Text('自增'), onPressed: () { //獲取共享model,進行數據自增操作 ChangeNotifierProvider.of<CountModel>(context).increase(); }, ); }), ], ); }))); } }
原文鏈接:https://juejin.cn/post/7007676764138766344#heading-3
相關推薦
- 2023-01-01 React路由動畫切換實現過程詳解_React
- 2022-06-01 C++的matlab接口轉換方法詳解_C 語言
- 2022-03-12 C++實現堆排序實例介紹_C 語言
- 2022-06-28 C#操作Byte數組和十六進制進行互轉_C#教程
- 2023-04-22 GO的range如何使用詳解_Golang
- 2022-04-20 為WPF框架Prism注冊Nlog日志服務_實用技巧
- 2023-11-19 psutil cpu_percent如何使用;python如何測試cpu的使用率
- 2022-09-30 Go語言編譯原理之變量捕獲_Golang
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支