当前位置: 首页 > 后端技术 > Python

FlutterProvider的使用

时间:2023-03-26 18:17:25 Python

在使用Provider的时候,我们主要关心三个概念:ChangeNotifier:真正数据(状态)存放的地方ChangeNotifierProvider:Widget树中提供数据(状态)的地方,对应的ChangeNotifierConsumer:需要的数据在Widget树中使用(status)代码:import'package:flutter/material.dart';导入“包:提供者/提供者.dart”;voidmain(){runApp(MyApp());}//^1.ChangeNotifier:真正的数据(Status)存放处//^2.ChangeNotifierProvider:Widget树中提供数据(state)的地方,以及里面会创建相应的ChangeNotifier//^3.Consumer:Widget树中需要使用数据(state)的地方//!1、创建ChangeNotifier,其实就是我们的state。它不仅存储了我们的数据模型,还包含了改变数据和暴露它想暴露的数据的方法。带有ChangeNotifier的Counter类{int_count=0;int获取计数=>_count;voidincrement(){_count++;通知监听器();}}classMyAppextendsStatelessWidget{//这个小部件是你应用程序的根。@overrideWidget构建(BuildContext上下文){//!2.ChangeNotifierProvider。将ChangeNotifierProvider插入到WidgetTree中,以便Consumers可以获取数据//创建顶级共享数据。这里使用MultiProvider可以创建多个共享数据,因为实际应用不可能只有一个数据模型返回MultiProvider(providers:[ChangNotifierProvider(create:(_)=>Counter()),],child:MaterialApp(title:'FlutterDemo',home:FirstPage(),),);}}classFirstPageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text("FirstPage"),actions:[FlatButton(child:Text("NextPage"),onPressed:()=>Navigator.push(context,MaterialPageRoute(builder:(context){returnSecondPage();})),),],),body:Center(child:Consumer(builder:(ctx,counterPro,child){returnText("Currentcount:${counterPro.count}",style:TextStyle(fontSize:20,color:Colors.red),);}),),//!3.消费者:需要用到数据(状态)在Widget树的地方floatingActionButton:Consumer(builder:(ctx,counterPro,child){//*ctx:上下文,目的是知道当前树的对象//*counterPro:ChangeNotifier对应的实例,也是我们在builder函数中主要使用的对象//*child:目的是为了优化,如果builder下有一个巨大的子树,当model改变的时候,我们不想重建子树,那么我们可以把这个子树放在Consumer的child里,这里直接import.returnFloatingActionButton(child:child,onPressed:(){counterPro.increment();},);},child:Icon(Icons.add),//!图标放在构建器外面,防止每次都刷新),);}}classSecondPageextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text("SecondPage"),actions:[FlatButton(child:Text("PreviousPage"),onPressed:()=>Navigator.push(context,MaterialPageRoute(builder:(context){returnFirstPage();})),),],),body:Center(child:Consumer(builder:(ctx,counterPro,child){returnText("当前计数:${counterPro.count}",style:TextStyle(fontSize:20,color:Colors.red),);}),),floatingActionButton:Consumer(builder:(ctx,counterPro,child){returnFloatingActionButton(child:child,onPressed:(){counterPro.increment();},);},child:Icon(图标.add),),);}}参考文章官方文档Mars字体简繁体转换哄女朋友神器号码测试好坏电视节目直播表