学习flutter已经有几周了,一开始还是非常抗拒的,无限嵌套的UI代码让我这个拖拽写UI的人真的很难受,但是随着渐渐深入学习flutter,就觉得UI的代码嵌套相对于flutter对开发效率的提升真的是可以忽略不计的。
dart语言
语言还是比较重要的,就像学习android之前需要学习java语言,只有语言熟练了学些flutter才会事半功倍。官方文档的中文翻译,dart语言的语法跟java非常像,如果有java功底人学习dart起来非常快。
dart有一些需要注意的语法:
-
每个类都是一个接口,dart语言没有interface关键字,如果使用implements某个类的话,就是将这个类的成员都看做是接口的定义。例如:
abstract class Person { String _name; void greet(); void walk(); void eat() { print('人得吃饭'); } } class Teacher implements Person { @override void greet() {} @override void walk() {} @override void eat() {} @override get _name => ''; @override set _name(String __name) { _name = __name; } } 复制代码
可以看到Person被实现的时候相当于生成了一个接口,所有方法都必须实现,字段需要实现get、set方法。
-
mixins特性,mixin是在多个类层次结构中重用类代码的一种方式,要实现mixin,创建一个Object的子类,不声明构造函数,也不调用super。例如:
class Programmer with Person { @override void greet() { // TODO: implement greet } @override void walk() { // TODO: implement walk } } 复制代码
因为person有抽象方法所以需要具体实现,Person不声明构造函数、也不调用super,Programmer就可以重用Person里面的eat方法以及name字段。
-
类型定义typedef,因为dart里面函数也是一种类型,当我们需要使用这个类型的时候,可以为函数指定一个别名,别名就代表这个函数的类型了。例如:
typedef Compare = int Function(Object a, Object b); 复制代码
-
async和await关键字支持异步编程,允许您编写类似于同步代码的异步代码,这个在很多语言里面已经提供了支持。
flutter
对于flutter,最先还是根据官方的文档来学习flutter中文网,如果把官方教程上的东西学习完基本上也就可以进行flutter的开发了。
- flutter的布局约束
在Flutter中,widget由其底层的RenderBox对象渲染。渲染框由它们的父级给出约束,并且在这些约束下调整自身大小。约束由最小宽度、最大宽度和高度组成; 尺寸由特定的宽度和高度组成。
如果容器的约束是有限制的,那么没有子部件的容器会尝试尽可能大,如果容器的约束是没有限制的,它就会尽可能小。也不是那么绝对,主要还是要看RenderBox的子类怎么去根据约束进行布局。
- StatelessWidget与StatefulWidget
StatelessWidget是无状态的,当有内容需要更改的时候会重新创建widget,StatefulWidget是有状态的,可以保存自己的状态,当内容需要更改的时候调用setState来改变内容。
对于StatelessWidget和StatefulWidget他们只是将各种基础的widget进行组合来构建复杂的UI,但他们不会参与真正的布局渲染,RenderObjectWidget才会控制布局以及渲染,类似许多基础的widget都是他的子类。
-
Widget、Element、RenderObject三者的关系
Describes the configuration for an [Element] 复制代码
Widget的实际工作也就是描述如何创建Element,Widget在整个UI界面中是一个不可变对象。它只是用来创建Element的配置信息。
An instantiation of a [Widget] at a particular location in the tree 复制代码
Element是widget的一个实例,当界面active的时候,Widget创建出Element后,Element会通过mount方法插入到WidgetTree,当界面deactive的时候,又会通过unmount方法将Element从WidgetTree中移除。
An object in the render tree. The [RenderObject] class hierarchy is the core of the rendering library's reason for being. 复制代码
RenderObject是渲染数里面的一个对象。整个的继承结构是视图渲染库的核心。实际上,所有的布局、绘制和事件响应全都由它负责。