Flutter Provider 5.0 学习
下面是修改过的provider 官方例子代码:
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'dart:math'; void main() { runApp( MultiProvider( providers: [ ChangeNotifierProvider(create: (_) => Counter()), ChangeNotifierProvider(create: (_) => Person()), ], child: const MyApp(), ), ); } class Counter with ChangeNotifier { int _count = 0; int get count => _count; String _name = 'Michael'; String get name => _name; void increment() { _count++; notifyListeners(); } void setName (int i) { _name = '$name $i'; notifyListeners (); } } class Person with ChangeNotifier { int _age = 18; int get age => _age; String _name = '1'; String get name => _name; void changeName () { var r = Random(); _name = 'Student: ${r.nextInt(100)}'; notifyListeners(); } void changeAge () { var r = Random(); _age = r.nextInt(100); notifyListeners(); } } class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({Key key}) : super(key: key); @override Widget build(BuildContext context) { print ('build home page'); return Scaffold( appBar: AppBar( title: const Text('Provider 5.0 Example'), ), body: Center( child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: const <Widget>[ Text('You have pushed the button this many times:'), Count(), ShowName(), ShowAge(), ShowPersonName(), ShowPersonName2(), ShowPersonAge (), ShowPersonAge2(), ChangePersonName(), ChangePersonAge (), ], ), ), floatingActionButton: FloatingActionButton( key: const Key('increment_floatingActionButton'), onPressed: () => context.read<Counter>().increment(), tooltip: 'Increment', child: const Icon(Icons.add), ), ); } } class Count extends StatelessWidget { const Count({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Text( '${context.watch<Counter>().count}', key: const Key('counterState'), style: Theme.of(context).textTheme.headline4); } } class ShowName extends StatelessWidget { const ShowName({Key key}) : super(key:key); @override Widget build(BuildContext context) { print ('show name'); return Text( '${context.watch<Counter>().name}', ); } } class ShowAge extends StatelessWidget { const ShowAge ({Key key}):super(key:key); @override Widget build (BuildContext context) { print ('show age'); return new Center( child: new Text('show Age', style: new TextStyle(fontSize: 32.0)) ); } } class ShowPersonName extends StatelessWidget { const ShowPersonName ({Key key}):super(key:key); @override Widget build (BuildContext context) { print ('show person name'); final personName = context.select((Person p) => p.name ); // 采用select 方式,绑定Person的name属性,只有name属性的值改变了,才刷新本widget return new Center( child: new Text('Person Name: ${personName}', style: new TextStyle(fontSize: 32.0)) ); } } class ShowPersonAge extends StatelessWidget { const ShowPersonAge ({Key key}):super(key:key); @override Widget build (BuildContext context) { print ('show person age'); final personAge = context.select((Person p)=>p.age); // 采用select 方式,绑定Person的age属性,只有age属性的值改变了,才刷新本widget, 推荐这用法 return new Center( child: new Text('Person Age: ${personAge}', style: new TextStyle(fontSize: 32.0)) ); } } class ShowPersonName2 extends StatelessWidget { const ShowPersonName2 ({Key key}):super(key:key); @override Widget build (BuildContext context) { print ('show person name 2'); return new Center( child: new Text('Person Name: ${context.watch<Person>().name}', style: new TextStyle(fontSize: 32.0)) ); } } class ShowPersonAge2 extends StatelessWidget { const ShowPersonAge2 ({Key key}):super(key:key); @override Widget build (BuildContext context) { print ('show person age 2'); return new Center( child: new Text('Person Age: ${context.watch<Person>().age}', style: new TextStyle(fontSize: 32.0)) ); } } class ChangePersonName extends StatelessWidget { const ChangePersonName({Key key}) : super(key:key); @override Widget build(BuildContext context) { return RaisedButton ( child: Text('Change Person Name'), onPressed: () { context.read<Person>().changeName(); }, ); } } class ChangePersonAge extends StatelessWidget { const ChangePersonAge({Key key}) : super (key:key); @override Widget build(BuildContext context) { return RaisedButton ( child: Text('Change Person Age'), onPressed: () { context.read<Person>().changeAge(); }, ); } }
provider:
读数据(两种):
// select 方式,绑定对象里面的属性,重绘少,性能高 final personAge = context.select((Person p)=>p.age); new Text('Person Age: ${personAge}', style: new TextStyle(fontSize: 32.0)); // 绑定对象, 重绘相对多, 性能相对低 new Text('Person Age: ${context.watch<Person>().age}', style: new TextStyle(fontSize: 32.0))
写数据:
RaisedButton ( child: Text('Change Person Age'), onPressed: () { context.read<Person>().changeAge(); }, );
相关推荐
Flutter provider状态管理框架
24 Flutter官方推荐的状态管理库provider的深入使用、初始化修改状态、父子组件同步状态.rar
目前,Flutter有几种状态管理器。但是,它们中的大多数都涉及到使用ChangeNotifier来更新widget,这对于中大型应用的性能来说是一个糟糕的方法。你可以在Flutter官方文档中查到,ChangeNotifier应该使用1个或最多2个...
23 Flutter官方推荐的状态管理库provider的使用.rar
flutter provider实现状态管理flutter
flutter-state flutter 状态管理 Provider 、GetX 、BloC 、Stream 使用Demo
Flutter中一个简单的状态管理框架
省下时间来处理逻辑,最简单的后台管理框架
Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能。 widget 基础 widget(部件) 如 React 里万物皆组件...
此应用使用provider进行状态管理。 这是我写的教程中有关如何使用Flutter和Provider创建Todos应用程序的最终应用程序。 您可以 阅读并从那里继续学习,也可以自己看一下代码。设置 $ git clone ...
flutter-mvvm-provider-demo
Flutter的CLI包管理器和模板
使用provider (6.x 版本)做状态管理 基于dio (4.x 版本)的网络请求封装 完整的集成测试、可访问性测试。 支持深色模式 本地化(感谢 @ghedwards) 使用Sliver 系列组件实现复杂滚动效果 使用高德地图定位选择地址...
主要介绍了Flutter 透明状态栏及字体颜色的设置方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Flutter利用第三方的Provider来状态管理,对新手而言相对容易一点,这里介绍通过Provider来改变APP的主题色,示例程序做得非常简单,主要帮助区理解和熟悉Provider的使用. 准备 依赖库 provider: ^4.0.2 导入类 import ...
Flutter从零开始学习,Windows环境下搭建环境。着手Flutter混合开发从零到开发应用的进阶。爱学习的你值得拥有!
Cipherly是一个使用Flutter构建的密码管理器
leo-editor 关于 flutter 变量管理插件 Provider 官方例子文学化编程分析
对于状态管理,您有两个选择: BRANCH master -> RxDart BRANCH mobx -> Mobx SQFlite与SQLite一起使用 使用Dio的HTTP请求 使用共享首选项和帮助程序类在设备上存储数据的帮助程序 查看连接状态的助手 页面过渡的...
flutter基础学习demo,该demo中利用widget树原理构建复杂的布局和效果,其中使用了动态路由,以及手势;通过该demo可以很好的学习的如何布局,手势的使用以及动态路由的使用,通过这些可以很快的了解到跨平台flutter...