189 8069 5689

flutter生成原理,flutter基础语法

Flutter入门-Dart面向对象原理

Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多个父类,相当于其他语言里的多继承。所有的类都有同一个基类Object,这和特性类似于Java语言,Java所有的类也都是继承自Object,也就是说一切皆对象。

创新互联公司从2013年创立,先为天宁等服务建站,天宁等地企业,进行企业商务咨询服务。为天宁企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

Dart 是一门面向对象的语言, 全部的类都是继承自 Object , 除了支持传统的 继承、封装、多态 , 还有基于组合(Mixin-based)的继承特性

类型推导(var/final/const)

var

final和const的区别

3.非零即真( )

4.字符串

5.集合

Dart中变量初始值为null,即使是int类型也可以是null(java中int默认是0, boolean默认是false); Dart支持自识别,可以是用var定义变量,也可以直接指定具体类型; final或者const都可修饰不可变的变量,final变量只能赋值一次,const是编译时常量。

int和double是num子类,没有float类型; 支持字符串模板,用${expression}的方式来实现字符串效果,类似如字符串拼接; String可以使用单引号或者双引号; Dart没有数组,只有列表; 其中List,Set,Map不是抽象接口,是具体实现类,可直接使用; Map的key没有指定类型,key类型不一致不会报错;key不能相同,但是value可以相同,value可以为null。 var name = 'Tom';

方法也是对象,方法可赋值给一个变量; 如果方法的参数是解构出来的可以通过 @required 注解标注为必填 const Scrollbar({Key key, @required Widget child}); 支持可选参数,可选命名参数用{}包围,可选位置参数写在最后并且使用[]包围 String say(String from, String msg, [String device]); 支持默认参数 void enableFlags({bool bold = false, bool hidden = false}) {…}; 以_开头的方法都是私有的。 void main() {

支持闭包,闭包能够访问外部方法内部的局部变量

1.空替换?? expr1 ?? expr2,如果expr1是non-null,返回其值。否则执行expr2并返回其结果; 2.条件成员访问?.P?.y = 4; 如果p是non-null,则设置y的值等于4; 3.类型判定操作符(as,is,is!); 4.级联操作,可以在同一个对象上连续调用多个函数以及访问成员变量;

和java不同的是,Dart可以抛出任意类型的对象; 程序不会强制要求开发中处理异常,但若发生异常,程序会中断; 其中异常主要分为Error和Exception两种类型。

创建对象可以不使用new关键字; Dart中没有public,private,protected这些关键字; 没有interfaces关键字,每一个类都是一个接口。我们可以用抽象类来类比java中的接口; Dart把多重继承的类叫做Mixins。

支持语法糖 Point(this.x, this.y); 每个实例变量都会自动生成一个getter方法,Non-final变量还会自动生成一个setter; 命名构造函数,使用命名构造函数可以为一个类实现多个构造函数,也能更加清晰的表明你的意图;

断言是如果条件表达式不满足则停止代码执行; 断言只在检查模式下运行有效,如果在生产模式下运行则不会执行。

Dart 以两种模式运行: Dart 1.x 有生产模式和检查模式两种模式, Dart 2.x 中移除了检查模式。

注:建议在开发/测试模式中使用 检查模式 运行 Dart VM ,因为它会添加警告和错误以帮助开发和调试过程;选中的模式会强制执行各种检查,例如类型检查等。

dart标识符可以包括字符和数字,但不能以 数字开头 。

Dart 是一种面向对象的编程语言。

代码说明:定义了一个类 TestClass ,这个类拥有一个方法 disp() ,方法可以实现在终端打印字符串 Hello Dart! ,使用 new 关键字创建类的对象,该对象调用方法 disp() 。

关于dart的学习还有很多;我列出如下: Flutter高级工程师进阶学习资料;需要可以私信我。发送“核心笔记”或“手册”,即可领取资料!

为什么Flutter开发APP性能最接近原生,前端程序员请关注

Flutter是谷歌公司推出的跨终端的开发框架,支持Android、iOS和WEB终端。1.0版在2018年12月5日发布,目前的最新版本是1.5,它采用的开发语言是Dart,Dart也是谷歌开发的计算机编程语言,语法类似C,是编译型语言:

hello world例子,打印字符串“Hello World!”:

1、没有桥接层

React Native、Weex等技术都是跨终端的框架,然而性能跟原生App存在很大差距。这是由于它们的工作原理决定的:

React Native、Weex等技术多了一个桥接层,所以界面渲染会慢一些,由于UI渲染非常频繁,想要不卡顿,基本上比较难,性能和用户体验跟原生代码有差距。而这恰恰是Flutter的优势所在:

Dart可以被编译成不同平台的本地代码,让Flutter不通过桥接层直接跟平台通信,自然性能会快一些。

2、编译执行

JavaScript是解释执行的,Dart是编译执行的,性能谁好一目了然。

3、Flutter Engine虚拟机

Flutter是依靠Flutter Engine虚拟机在iOS和Android上运行的,Flutter Engine使用C/C++编写,开发人员通过Flutter框架直接和API在内部进行交互,所以具有输入低延迟和UI渲染高帧速率的特点。除了这特点之外,Flutter还提供了自己的小部件,Flutter小部件是使用从React获取灵感的现代框架构建的。 中心思想是您使用小部件构建UI。

窗口小部件根据其当前配置和状态描述了它们的视图。 当窗口小部件的状态发生更改时,窗口小部件会重建其描述,框架将根据前面的描述进行区分,以确定底层呈现树从一个状态转换到下一个状态所需的最小更改。可以直接在OS平台提供的画布上进行描绘,也就是一些核心类库直接放到虚拟机里面,调用起来更快。

从它的系统结构可以看出,类似安卓的ART(Android Run Time)虚拟机,同样采用AOT(Ahead of TIme)技术,会在APP安装时就编译成机器语言,不再解释执行,从而优化了APP运行的性能。

4、自带渲染引擎

Flutter使用谷歌自己的Skia渲染引擎,而Android系统自带Skia引擎,iOS平台上Flutter也会把Skia引擎打包到APP中,从而实现了高效渲染。而React Native通过桥接层访问原生UI,操作频繁就容易出性能问题。

综合所述,Flutter 是性能最接近原生代码 的一种开发框架,未来也会是构建谷歌Fuchsia应用的主要方式,前途不可限量,唯一的问题就是需要学习一门新的语言:Dart,而有Java或者C#语言基础的程序员会比较容易学习。

Flutter Widget的渲染原理

抽象类Element 有mount方法

抽象类Widget 有createElement方法

RenderObjectWidget有createElement方法 和  createRenderObject方法

每一个Widget, 都有createElement方法,通过createElement方法 创建一个Element对象,

Element加入Element树中,它会创建三种Element ,每个Element 有个mount方法

第一种:RenderObjectElement(RenderObjectWidget的createElement方法)

mount方法中 调用

widget.createRenderObject(this) ,创建RenderObject对象,RenderObject对象加入Render树中

第二种:StatefulElement继承ComponentElement 

第三种:StatelessElement继承ComponentElement 

并不是所有的Widget都会被独立渲染!只有继承RenderObjectWidget的才会创建RenderObject对象! 

flutter-动画

1.动画原理:在一段时间内快速的多次改变UI外观,由于人眼会产生视觉暂留所以最终看到的就是一个连续的动画。

UI的一次改变称为一个动画帧,对应一次屏幕刷新。

FPS:帧率,每秒的动画帧数。

flutter动画分为两类:

常见动画模式:

是一个抽象类,主要的功能是保存动画的值和状态。常用的一个Animation类是Animation double ,是一个在一段时间内依次生成一个区间之间的值的类,可以是线性或者曲线或者其他。

可以生成除double之外的其他类型值,如:Animation Color 或 Animation Size 。

是一个动画控制器,控制动画的播放状态,在屏幕刷新的每一帧,就会生成一个新的值。

包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法,在给定的时间段内线性的生成从0.0到1.0(默认区间)的数字。

curve:描述动画的曲线过程。

curvedAnimation:指定动画的曲线。

常用Curve:

继承自Animatable T ,表示的就是一个 Animation 对象的取值范围,只需要设置开始和结束的边界值(值也支持泛型)。 它唯一的工作就是定义输入范围到输出范围的映射。

例如,Tween可能会生成从红到蓝之间的色值,或者从0到255。

Tween.animate:返回一个Animation。

映射过程:

1). Tween.animation通过传入 aniamtionController 获得一个_AnimatedEvaluation 类型的 animation 对象(基类为 Animation), 并且将 aniamtionController 和 Tween 对象传入了 _AnimatedEvaluation 对象。

2). animation.value方法即是调用 _evaluatable.evaluate(parent)方法, 而 _evaluatable 和 parent 分别为 Tween 对象和 AnimationController 对象。

3). 这里的 animation 其实就是前面的 AnimationController 对象, transform 方法里面的 animation.value则就是 AnimationController 线性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我们可以看到这个 0.0~1.0 的值被映射到了 begin 和 end 范围内了。

接收一个TickerProvider类型的对象,它的主要职责是创建Ticker。

防止屏幕外动画消耗资源。

[图片上传失败...(image-115b94-1636441483468)]

过程:

回调:

不使用addListener()和setState()来给widget添加动画。

使用AnimatedWidget,将widget分离出来,创建一个可重用动画的widget,AnimatedWidget中会自动调用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染过渡,把渲染过程也抽象出来:

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute:平台风格一致的路由切换动画

CupertinoPageRoute:左右切换风格

自定义:PageRouteBuilder

1.要创建交织动画,需要使用多个动画对象(Animation)。

2.一个AnimationController控制所有的动画对象。

3.给每一个动画对象指定时间间隔(Interval)

可以同时对其新、旧子元素添加显示、隐藏动画.

当AnimatedSwitcher的child发生变化时(类型或Key不同),旧child会执行隐藏动画,新child会执行执行显示动画。

希望大家支持一下,感谢

Flutter Bloc实现原理

1、继承SingleChildStatelessWidget,就是一个widget,通过create 传入一个Bloc对象

1、Bloc继承自BlocBase,BlocBase中创建了StreamController对象,为多订阅对象

其中onCounterEvent((event, emit)为初始化创建_eventController监听

2、Bloc中创建_eventController,为事件通知

3、BlocBase创建_stateController,为状态刷新通知

4、add方法是执行广播通知

5、处理完数据之后执行emit()方法,其中emit方法是stateController广播

1、 BlocBuilder继承自BlocBuilderBase,_BlocBuilderBaseState中build方法返回的是BlocListener

2、BlocListener继承BlocListenerBase,_BlocListenerBaseState中_subscribe()添加监听stateController广播通知

Flutter Provider实现原理

ChangeNotifierProvider、ChangeNotifier、Consumer的关系

1、ChangeNotifierProvider的父类ListenableProvider,ListenableProvider中实现了_startListening方法,_startListening主要是将Element的刷新方法添加到ChangeNotifier中的_listeners中

2、ListenableProvider将startListening传入其父类InheritedProvider,InheritedProvider主要是创建delegate = _CreateInheritedProvider。这个delegate就是_CreateInheritedProvider中delegate.startListening中的delegate

1、ChangNotifier负责更新UI

ChangeNotifier中notifyListeners,通过遍历_listeners,实现强制刷新UI

1、Consumer:包裹待刷新UI,在buildWithChild中将Provider.ofT(context)传入builder方法

2、解析 Provider.ofT(context)

Provider.ofT(context)是获取ChangeNotifier对象的方法

Provider.of中通过传入的context,获取父视图为inheritedElement的对象

获取到inheritedElement,通过inheritedElement.getValue的方式获取ChangeNotifier对象

7、继续查看inheritedElement?.value。通过断点可以进入_CreateInheritedProvider 类中get Value方法。调用startListening将当前Consumer包裹的element添加到Prorivder的_listeners数组中

通过调用notifyListeners()来刷新所有Consumer完整的Provider执行流程大概就是这样,流程图如下


当前文章:flutter生成原理,flutter基础语法
URL分享:http://cdxtjz.cn/article/dsgcsge.html

其他资讯