Flutter入门这一篇效率文章就够了
本文面向 Flutter 初学者,旨在用易懂的方式带大家入门。除了 Flutter 代码,还会介绍到语法、原理、特性等基础知识。相信本文能帮助你学习和理解 Flutter。
跨平台技术简介
我们先看一下目前的一些跨平台方案,从前端渲染的角度来分类的话,大致可以分为以下几种方案。
WebView 渲染
这种方案就很好理解,现在很多项目都会嵌入 H5 的页面。就是用 JavaScript 等前端技术进行开发,在客户端上用 WebView 来进行渲染。微信小程序目前使用的就是这种方案。
![227660e18ec9f6a61a9149c2f4345ddc.png](https://i-blog.csdnimg.cn/blog_migrate/99af818f9e2b43607036ab4ea0a5a084.jpeg)
它的优点很明显,使用成熟的前端技术进行开发,学习成本低,开发效率高,并且支持动态发布代码。
但缺点也很明显,在性能体验上,和原生还是存在较大差距的。
原生控件渲染
既然 WebView 的性能不够好,于是就有了使用原生控件进行渲染的方案。这种方案,同样也是使用 JavaScript 开发,区别是它最终是调用原生控件进行渲染的。这种方案的代表是 Facebook 的 React Native。
![09ad83eedc12201119c6ccc580d4a891.png](https://i-blog.csdnimg.cn/blog_migrate/e797682de7b0e4e48756b94c52590eab.jpeg)
由于使用原生控件进行渲染,性能体验也会更接近原生。但也只是更接近,和原生还是有差距的,因为它需要频繁的进行 JavaScript 和原生之间的通信,这个通信效率是比较低的。
另外,由于需要适配各个平台的控件,那就有可能出现,系统控件更新了,而框架本身还没有更新,由此产生了一些问题。换句话说,这种方案是受到原生控件限制的。
绘图引擎渲染
接下来就是主角了。
在前端,如果完全不使用原生控件,我们可以通过系统的绘图 API 绘制出一个用户界面。从这个角度出发,可以在各个平台使用一个统一接口的绘图引擎来进行界面绘制,这个引擎最终调用的是系统的 API 绘制的。这样的话,它的性能可以做到接近原生,并且又不受原生控件的限制,在不同平台上能够做到 UI 统一。
Flutter 就是这样的一个开发框架。
![102ffa8a9f634a4bcd9906fe7159294a.png](https://i-blog.csdnimg.cn/blog_migrate/99d14c73c82d21fc433b0655f9ab8ed7.jpeg)
Flutter 简介
一个跨平台 UI 解决方案
Flutter 是由 Google 开发的,一个跨平台 UI 解决方案。换句话说,它原则上只管 UI 的问题,如果涉及到平台本身的一些功能,比如调用蓝牙、摄像头,一般还是需要原生代码去操作。但现在也会有一些第三方库帮我们解决这些问题。
绘图引擎 Skia
![5e71604dde45406c1c76711af8b6e2e4.png](https://i-blog.csdnimg.cn/blog_migrate/fe6576409ef3e42d6cf877bb3319babf.jpeg)
Flutter 使用 Skia 作为它的绘图引擎。Skia 已经被 Google 收购,目前很多 Google 旗下的产品都是用 Skia 绘制的,包括 Android。
Android 内置了 Skia,但 iOS 没有,所以在打 iOS 安装包的时候,会把 Skia 一起打进去。这就导致了,用同一份 Flutter 代码打包之后,iOS 的包要比 Android 的包大一些。
开发语言 Dart
![5d920b1cf18a913bdce6ca889997d2ce.png](https://i-blog.csdnimg.cn/blog_migrate/6b5cbca7c353fbc611ec57f2f227c453.jpeg)
Flutter 使用的开发语言,叫 Dart。Dart 也是 Google 自家的,它是一门面向对象的语言,从它身上会看到一些其他开发语言的影子。学习起来难度不大的。
前面讲跨平台方案的时候,可以发现别的方案基本都是用 JavaScript 作为开发语言的,但为什么 Flutter 不用?就因为 Dart 是谷歌自家的吗?这个问题先留着,我们后面会提到。
搭建开发环境
这里部分就简单点带过了,具体的搭建流程可以在官网查看:
https://flutter-io.cn/docs/get-started/install
主要的搭建步骤如下:
下载 Flutter SDK
官网下载地址:
https://flutter.dev/docs/development/tools/sdk/releases
由于在国内访问可能受限,官方为中国开发者搭建了镜像:
https://flutter.dev/community/china
更新环境变量
解压后,将 flutterbin 的全路径添加到环境变量 PATH 中。
安装开发工具
理论上,任何文本编辑器都可以用来开发 Flutter 应用,但推荐的开发工具是 Android Studio、IntelliJ 以及 VS Code。因为在这些开发工具上,可以安装官方的 Flutter 和 Dart 插件,得到更好的开发体验。文章里使用 Android Studio 来演示。
如果你打算开发 iOS 应用,则还需要安装 Xcode。
安装插件
在开发工具的插件设置中,安装上面说到的 Flutter 和 Dart 插件。Flutter 插件用于支持 Flutter 的运行、调试、热重载等功能,而 Dart 插件则提供了代码的输入校验、代码补全等功能。
Hello World!
万物始于 Hello World,我们先来创建一个显示 Hello World 的 Flutter 项目。
在 Android Studio 的欢迎页面选择 Start a new Flutter project,或者通过菜单栏的 File > New > New Flutter Project,创建一个新的 Flutter 项目。
创建好的项目里面包含了 android 和 ios 两个文件夹,它们是标准的 Android 和 iOS 项目。我们的 Flutter 代码,存放在 lib 文件夹里。项目创建好后,会默认带一个计数器的示例,我们不管它,把 main.dart 的代码改成 Hello World:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("Hello")), body: Center(child: Text("Hello World!