Flutter怎么用
Flutter怎么用
这篇文章给大家分享的是有关Flutter怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
1. 前言
在初学新技术之前,我们总会要从最基本的东西了解起来,就好比当接触Android的时候,我们学四大组件都要学好久,是否还记得在Android的生命周期?首先让我们回顾下Android中的生命周期
关于这个就不在多说了,常用场景总结下:
1.启动Activity:系统会先调用onCreate方法,然后调用onStart方法,最后调用onResume,Activity进入运行状态。2.当前Activity被其他Activity覆盖其上或被锁屏:系统会调用onPause方法,暂停当前Activity的执行。3.当前Activity由被覆盖状态回到前台或解锁屏:系统会调用onResume方法,再次进入运行状态。4.当前Activity转到新的Activity界面或按Home键回到主屏,自身退居后台:系统会先调用onPause方法,然后调用onStop方法,进入停滞状态。5.用户后退回到此Activity:系统会先调用onRestart方法,然后调用onStart方法,最后调用onResume方法,再次进入运行状态。6.当前Activity处于被覆盖状态或者后台不可见状态,即第2步和第4步,系统内存不足,杀死当前Activity,而后用户退回当前Activity:再次调用onCreate方法、onStart方法、onResume方法,进入运行状态。7.用户退出当前Activity:系统先调用onPause方法,然后调用onStop方法,最后调用onDestory方法,结束当前Activity。
emmm,相信小伙伴们现在应该记忆起来了吧,前戏好了,进入主题,聊聊我们今天的主人公"State"。
2. Widget概念
在我们的主人公出场前,先认识下他的小伙伴
Flutter中几乎所有的对象都是一个Widget,与原生开发中“控件”不同的是,Flutter中的widget的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的组件如:用于手势检测的GestureDetectorwidget、用于应用主题数据传递的Theme等等。而原生开发中的控件通常只是指UI元素
3. State的引入
StatelessWidget(用于不需要维护状态的场景)
abstractclassStatelessWidgetextendsWidget
StatefulWidget(用于需要维护状态的场景)
abstractclassStatefulWidgetextendsWidget
从上述的代码中我们看到他们都继承了一个东西Widget,那就先简单的看下这个类
@immutableabstractclassWidgetextendsDiagnosticableTree{constWidget({this.key});finalKeykey;@protectedElementcreateElement();@overrideStringtoStringShort(){returnkey==null?'$runtimeType':'$runtimeType-$key';}@overridevoiddebugFillProperties(DiagnosticPropertiesBuilderproperties){super.debugFillProperties(properties);properties.defaultDiagnosticsTreeStyle=DiagnosticsTreeStyle.dense;}staticboolcanUpdate(WidgetoldWidget,WidgetnewWidget){returnoldWidget.runtimeType==newWidget.runtimeType&&oldWidget.key==newWidget.key;}}
上述代码中有一个我们很常见的方法,每次在继承的时候都需要重写的一个方法
@overrideStatefulElementcreateElement()=>StatefulElement(this);
继续跟踪StatefulElement发现存在一个widget.createState()方法,发现了就要继续,宁杀错,莫放过
classStatefulElementextendsComponentElement{///Createsanelementthatusesthegivenwidgetasitsconfiguration.StatefulElement(StatefulWidgetwidget):_state=widget.createState(),super(widget){.....assert(_state._element==null);_state._element=this;assert(_state._widget==null);_state._widget=widget;assert(_state._debugLifecycleState==_StateLifecycle.created);}
点击createState方法我们终于找到了今天的主人公,没错,就是它,State,跑不掉了。
@protectedStatecreateState();
嗯,我一眼就看到了initState这个方法,还记得在网络请求的时候亦或是变量的初始化,总是要写到这个方法里面
@overridevoidinitState(){//TODO:implementinitStatesuper.initState();_loadItemPage();}
我们可以将上述方法分为三个部分进行描述,见下图:
大致可以看成三个阶段
初始化(插入渲染树)
构造函数
不属于生命周期,因为这个时候State的widget属性为空,此时无法在构造函数中访问widget属性
initState
///Calledwhenthisobjectisinsertedintothetree.这个函数在生命周期中只调用一次。这里可以做一些初始化工作,比如初始化State的变量
didChangeDependencies
///Calledwhenadependencyofthis[State]objectchanges.这个函数会紧跟在initState之后调用
状态改变(在渲染树中存在)
didUpdateWidget
///Calledwheneverthewidgetconfigurationchanges.当组件的状态改变的时候就会调用didUpdateWidget,比如调用了setStat
销毁(从渲染树种移除)
deactivate
///Calledwhenthisobjectisremovedfromthetree.在dispose之前,会调用这个函数。复制代码
dispose
///Calledwhenthisobjectisremovedfromthetreepermanently.一旦到这个阶段,组件就要被销毁了,这个函数一般会移除监听,清理环境。
这个函数在生命周期中只调用一次。这里可以做一些初始化工作,比如初始化State的变量。
大体这样吧,最后来个图表总结下
阶段 | 调用次数 | 是否支持setState |
---|---|---|
构造函数 | 1 | 否 |
initState | 1 | 支持但无效(使用setState和不使用一样) |
didChangeDependencies | >=1 | 支持但无效 |
didUpdateWidget | >=1 | 支持但无效 |
deactivate | >=1 | 否 |
dispose | 1 | 否 |
示例分析 可能有人会说,bb了那么久,毛都没看到一根,所以讲了这么多,不来点实际的怎么对的住之前的bb呢?来人啊,上代码
import'package:flutter/material.dart';classLifeStateextendsStatefulWidget{@override_lifeStatescreateState()=>_lifeStates();}class_lifeStatesextendsState<LifeState>{@overridevoidinitState(){//TODO:implementinitStatesuper.initState();print('initState');}@overridevoiddidChangeAppLifecycleState(AppLifecycleStatestate){print(state.toString());}@overridevoiddidChangeDependencies(){//TODO:implementdidChangeDependenciessuper.didChangeDependencies();print('didChangeDependencies');}@overridevoiddidUpdateWidget(LifeStateoldWidget){super.didUpdateWidget(oldWidget);print('didUpdateWidget');}@overrideWidgetbuild(BuildContextcontext){print('build');//TODO:implementbuildreturnMaterialApp(home:Center(child:GestureDetector(child:newText('lifeCycle'),onTap:(){Navigator.of(context).push(newMaterialPageRoute(builder:(BuildContextc){returnnewText('sdfs');}));},)),);}@overridevoidreassemble(){//TODO:implementreassemblesuper.reassemble();print('reassemble');}@overridevoiddeactivate(){//TODO:implementdeactivatesuper.deactivate();print('deactivate');}@overridevoiddispose(){//TODO:implementdisposesuper.dispose();print('dispose');}}
测试结果
创建widget
initStatedidChangeDependenciesbuild
退出页面
deactivatedispose
点击热加载按钮
reassembledidUpdateWidgetbuild
app从显示到后台(home键)
AppLifecycleState.inactiveAppLifecycleState.paused
app从后台回到前台
AppLifecycleState.inactiveAppLifecycleState.resumed
感谢各位的阅读!关于“Flutter怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!