Flutter初步入门

Flutter 使用了 Dart 语言。它的整体的 UI 构建思想和前端和原生移动端是有极大差别的。

一切皆是 Widgets。

整个页面其实就是由 Widgets 嵌套组成的控件树,而所有的基础控件,全部继承自 Widgets。而且 Flutter 控件的概念和前端,移动端也有差别。例如一个按钮,移动端一个按钮,会给它设置宽高,位置,颜色,文字。这些属性共同构成了一个按钮。但是在 Flutter 中并不是这样,颜色本身,就是一个控件,位置本身也是一个控件。当你需要一个按钮出现在正确的位置,长得正确,并且做正确的事,你就需要嵌套 4,5 层的不同控件,每一层的控件,都会将界面效果本身以 child:Widgets()的形式传递下去。

控件本身分为 StatelessWidget 和 StatefulWidget 两种状态。

  • 从下图中我们也能看到,StatefulWidget 的功能是帮助界面进行动态展示,而 StatelessWidget
  • 则是一个静态展示的效果。因此我们也就可以简单的理解,StatefulWidget 的控件可以改变自身的状态,而 StatelessWidget 不能改变自身的状态,类似一个 final 的效果。但是不同的是,StatelessWidget 的控件可以通过嵌套,让包裹着它的父 Widget 控件来改变它的状态。

Flutter 工程结构

Flutter 本身使用了 androidStudio 进行开发,lib 为工程代码,pubspec.yaml 为配置文件,android 及 ios 为原生代码,images 里为图片内容。

目前已经使用 Flutter 的团队

美团,闲鱼,腾讯直播,github 等。

Flutter for Web 原理

Flutter for Web 和 Flutter 在上层都是 Dart 环境,两者不同的是,Flutter 的 Dart 代码运行在 Dart 虚拟机中,界面由 Flutter 引擎处理,通过 Skia 绘图引擎经由 GPU 绘制到屏幕上。而 Flutter for Web 的 Dart 代码编译成 JavaScript,界面上部分转换成标准的 html 标签,部分转换成通过 Canvas 绘制的自定义标签,最终构成一个 dom 树。

目前发现的问题

  • 使用了 Flutter 后的应用,应用包大小会明显高于原生 app。
  • Dart 语言及 Flutter 上手成本较高,需要逐渐熟练。目前本人初学 Flutter 绘制一个简单体验中心页面,所需要时间大致是原生的三倍。
  • 键盘点击挡住输入框的问题。这个问题在初步开发时遇到,目前未解决。(隐射出目前非大厂使用人数较少,一些原生的简单小问题需要花费时间解决。)
  • 第三方库较少,很多需要自己造轮子。
  • Dart 语言反射极不友好,目前没有成熟的数据库 ORM 框架。
  • 目前一些原生的功能性 sdk 并没有 flutter 端,因此存在被动需要混合界面栈的可能性。
  • 虽然官方说 Flutter 的开发工具可以是轻量级的,但是由于 Dart 代码和 Widgets 控件树有大量括号,阅读依赖 AndroidStudio 的自动注释功能来知晓应该把 Widgets 括号括在哪