Flutter作为跨平台的UI框架,主要解决的是界面的跨平台。
在Flutter中,一切都显示都是Widget,Widget的概念非常广泛,可以表示一些UI组建、手势等。
Flutter中的Widget可以粗略理解为Android中的View。Widget与View不同的是:Widget具有不同的生命周期,它是不可变的,每当Widget状态发生变化时,Flutter都会创建一个新的Widget;而Android中的View会被绘制一次,并且在invalidate调用之前不会重绘。
Widget不是真正意义上的控件,在Flutter中的定位更像是配置文件。
Widget可分为有状态和无状态:
无状态,即继承自StatelessWiget,指保持在一帧。
有状态,即继承自StatefulWidget,指数据更新时,构建新的Widget。
WidgetsApp:需要自定义风格。
MaterialApp:Android的Material Design风格。
CupertinoApp:iOS风格。
Flutter中的Widget负责的功能都相对比较单一。
Container:只能包含一个子Widget,默认充满,可以使用padding、margin、color、width、height、decoration等配置。
Padding:只能包含一个子Widget,可以设置内边距值。
Center:只能包含一个子Widget,用于居中显示。
Stack:可以包含多个子Widget,用于多个子Widget层叠效果。
Column:可以包含多个子Widget,用于垂直线性布局。
Row:可以保护多个子Widget,用于水平线性布局。
Expanded:只能包含一个子Widget,在Column或Row中填充空间,可以设置flex配置比例。
ListView:可以包含多个子Widget的滚动控件。
Text:显示文本,可以通过style设置样式。
RichText:富文本,可以通过TextSpan拼接富文本效果。
TextField:文本输入框。
Image:图片显示。
当Widget被加载时,首先会创建出Widget对应的Element对象,然后Element读取Widget的配置信息(尺寸、位置、文本等),转化为RenderObject对象,RenderObject才是真正上的控件对象,最终插入RenderObject树中实现绘制。
Element会保持一些配置信息,同时Widget的加载、生命周期和更新等流程,RenderObject的创建、更新等时机,child的加载、更新等行为,都是通过Element实现或执行的。
Widget可能被多次调用。
Element一般只会创建一次,Element持有Wdiget和RenderObject。
Widget与Element是多对一的关系,Element与RenderObject是一对一关系。
AVM(Application-View-Model)是千语创想推出的一个跨端高性能 JavaScript框架,更趋近于原生的编程体验,它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型,适合高度定制化的项目。AVM是千语创想基于标准H5子集设计的DSL中间语言编程框架,其可具备如下能力:
Virtual DOM:通过虚拟DOM,渲染到不同终端,充分尊重系统特性,为不同终端执行差异处理,实现高效渲染;
组件化:高可重用性、可组合性、可维护性的架构设计,隐藏了复杂的DOM结构和行为,让开发者专注于应用的功能和外观;
数据绑定:轻松将数据源绑定到应用用户界面,降低逻辑复杂性和开发难度;
状态管理和路由:有效分离用户界面和数据处理,实现项目的工程化管理;
类Vue语法和兼容React JSX,兼具Vue的轻巧和React的灵活性。
千语创想 DSL最终可编译为标准JS,通过DeepEngine渲染到app端和Web端,或者编译为微信小程序代码,用于微信小程序平台发布。