概念与安装

# 移动开发技术

# 原生开发

原生应用程序是指某一个移动平台（比如 iOS 或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的 SDK API。比如 Android 原生应用就是指使用 Java 或 Kotlin 语言直接调用 Android SDK 开发的应用程序；而 iOS 原生应用就是指通过 Objective-C 或 Swift 语言直接调用 iOS SDK 开发的应用程序。

主要优势：

可访问平台全部功能（GPS、摄像头）；
速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；

主要缺点：

平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；
内容固定，动态化弱，大多数情况下，有新功能更新时只能发版；

总结一下，纯原生开发主要面临动态化和开发成本两个问题，而针对这两个问题，诞生了一些跨平台的动态化框架。

# 跨平台技术

针对原生开发面临的问题，业界一直都在努力寻找好的解决方案，根据其原理，主要分为三类：

H5 + 原生（Cordova、Ionic、微信小程序）
JavaScript 开发 + 原生渲染（React Native、Weex）
自绘 UI + 原生 (Qt for mobile、Flutter)

技术类型	UI 渲染方式	性能	开发效率	动态化	框架代表
H5 + 原生	WebView 渲染	一般	高	支持	Cordova、Ionic
JavaScript + 原生渲染	原生控件渲染	好	中	支持	RN、Weex
自绘 UI + 原生	调用系统 API 渲染	好	Flutter 高，Qt 低	默认不支持	Qt、Flutter

值得注意的是 Flutter 的 Release 包默认是使用 Dart AOT 模式编译的，所以不支持动态化，但 Dart 还有 JIT 或 snapshot 运行方式，这些模式都是支持动态化的。

# Flutter

Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android 平台。 Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native（即原生开发，指基于平台原生语言来开发应用，flutter 可以和平台原生语言混合开发）扩展。

# 跨平台自绘引擎

Flutter 与用于构建移动应用程序的其他大多数框架不同，因为 Flutter 既不使用 WebView，也不使用操作系统的原生控件。相反，Flutter 使用自己的高性能渲染引擎来绘制 Widget（组件）。这样不仅可以保证在 Android 和 iOS 上 UI 的一致性，也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter 底层使用 Skia 作为其 2D 渲染引擎，Skia 是 Google 的一个 2D 图形处理函数库，包含字型、坐标转换，以及点阵图，它们都有高效能且简洁的表现。Skia 是跨平台的，并提供了非常友好的 API，目前 Google Chrome 浏览器和 Android 均采用 Skia 作为其 2D 绘图引擎。

# 高性能

Flutter 高性能主要靠两点来保证：

第一：Flutter App 采用 Dart 语言开发。Dart 在 JIT（即时编译）模式下，执行速度与 JavaScript 基本持平。但是 Dart 支持 AOT，当以 AOT 模式运行时，JavaScript 便远远追不上了。执行速度的提升对高帧率下的视图数据计算很有帮助。

第二：Flutter 使用自己的渲染引擎来绘制 UI ，布局数据等由 Dart 语言直接控制，所以在布局过程中不需要像 RN 那样要在 JavaScript 和 Native 之间通信，这在一些滑动和拖动的场景下具有明显优势，因为在滑动和拖动过程往往都会引起布局发生变化，所以 JavaScript 需要和 Native 之间不停地同步布局信息，这和在浏览器中 JavaScript 频繁操作 DOM 所带来的问题是类似的，都会导致比较可观的性能开销。

# 采用 Dart 语言开发

开发效率高。

Dart 运行时和编译器支持 Flutter 的两个关键特性的组合：
- 基于 JIT 的快速开发周期：Flutter 在开发阶段采用 JIT 模式，这样就避免了每次改动都要进行编译，极大地节省了开发时间；
- 基于 AOT 的发布包: Flutter 在发布时可以通过 AOT 生成高效的机器码以保证应用性能。而 JavaScript 则不具有这个能力。
高性能。

Flutter 旨在提供流畅、高保真的 UI 体验。为了实现这一点，Flutter 中需要能够在每个动画帧中运行大量的代码。这意味着需要一种既能保证高性能，也不会出现丢帧的编程语言，而 Dart 支持 AOT，在这一点上可以做得比 JavaScript 更好。
快速内存分配。

Flutter 框架使用函数式流，这使得它在很大程度上依赖于底层的内存分配器。当然 Chrome V8 的 JavaScript 引擎在内存分配上也已经做的很好，所以在内存分配上 Dart 并不能作为超越 JavaScript 的优势，而对于 Flutter 来说，它需要这样的特性，而 Dart 也正好满足而已。
类型安全和空安全。

由于 Dart 是类型安全的语言，且 2.12 版本后也支持了空安全特性，所以 Dart 支持静态类型检测，可以在编译前发现一些类型的错误，并排除潜在问题。与之不同的，JavaScript 是一个弱类型语言。
Dart 团队就在你身边。

看似不起眼，实则举足轻重。由于有 Dart 团队的积极投入，Flutter 团队可以获得更多、更方便的支持，正如 Flutter 官网所述 “我们正与 Dart 社区进行密切合作，以改进 Dart 在 Flutter 中的使用。”

# 搭建 Flutter 开发环境

# Windows

# 获取 Flutter SDK

https://docs.flutter.dev/release/archive (opens new window)

下载最新可用的安装包，如当前最新 flutter_windows_3.24.3-stable.zip
将其解压到一个目录，如： D:\flutter
找到根目录下的 flutter_console.bat 文件，打开即可运行 flutter 命令

        ######## ##       ##     ## ######## ######## ######## ########
        ##       ##       ##     ##    ##       ##    ##       ##     ##
        ##       ##       ##     ##    ##       ##    ##       ##     ##
        ######   ##       ##     ##    ##       ##    ######   ########
        ##       ##       ##     ##    ##       ##    ##       ##   ##
        ##       ##       ##     ##    ##       ##    ##       ##    ##
        ##       ########  #######     ##       ##    ######## ##     ##


 WELCOME to the Flutter Console.
 ===============================================================================

 Use the console below this message to interact with the "flutter" command.
 Run "flutter doctor" to check if your system is ready to run Flutter apps.
 Run "flutter create <app_name>" to create a new Flutter project.

 Run "flutter help" to see all available commands.

 Want to use an IDE to interact with Flutter? https://flutter.dev/ide-setup/

 Want to run the "flutter" command from any Command Prompt or PowerShell window?
 Add Flutter to your PATH: https://flutter.dev/setup-windows/#update-your-path

 ===============================================================================

D:\flutter>

配置环境变量

在开始菜单的搜索功能键入 env ，然后选择 编辑系统环境变量
在 用户变量 下添加 flutter 的 /bin 添加到 path
重启 windows 后生效

运行 flutter doctor 命令

flutter doctor

第一次运行 flutter 命令（如 flutter doctor ）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。缺失的依赖需要安装一下，安装完成后再运行 flutter doctor 命令来验证是否安装成功。

# Android 设置

Flutter 依赖于 Android Studio 的全量安装。Android Studio 不仅可以管理 Android 平台依赖、SDK 版本等，而且它也是 Flutter 开发推荐的 IDE 之一。

安装 Android Studio：略
启动 Android Studio，然后执行 “Android Studio 安装向导”。这将安装最新的 Android SDK、Android SDK 平台工具和 Android SDK 构建工具，这些是用 Flutter 进行 Android 开发所需要的。

# macOS

参考：Make iOS apps | Flutter (opens new window)

# 获取 Flutter SDK

https://docs.flutter.dev/release/archive (opens new window)

下载最新 SDK，如 flutter_macos_3.24.3-stable.zip
解压到一个目录，如 ~/development/fullter
配置环境变量：

cd ~
vim .zshenv

# 填加以下内容
export PATH=$HOME/development/flutter/bin:$PATH

# 安装 Xcode

App Store 搜索 Xcode ，下载
将命令行工具配置为使用已安装的 Xcode 版本：

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

签署 Xcode 许可协议

sudo xcodebuild -license

# 升级 Flutter

# Flutter SDK 分支

Flutter SDK 有多个分支，如 beta、dev、master、stable，其中 stable 分支为稳定分支（日后有新的稳定版本发布后可能也会有新的稳定分支，如 1.0.0），dev 和 master 为开发分支，安装 flutter 后，你可以运行 flutter channel 查看所有分支，如笔者本地运行后，结果如下：

Flutter channels:
  beta
  dev
* master

带 "*" 号的分支即你本地的 Flutter SDK 跟踪的分支，要切换分支，可以使用 flutter channel beta 或 flutter channel master ，Flutter 官方建议跟踪稳定分支，但你也可以跟踪 master 分支，这样可以查看最新的变化，但这样稳定性要低得多。

# 升级 Flutter SDK 和依赖包

要升级 flutter sdk，只需一句命令：

flutter upgrade

该命令会同时更新 Flutter SDK 和你的 flutter 项目依赖包。如果你只想更新项目依赖包（不包括 Flutter SDK），可以使用如下命令：

flutter packages get 获取项目所有的依赖包。
flutter packages upgrade 获取项目所有依赖包的最新版本。

# IDE 配置与使用

Flutter 官方建议使用 Android Studio 和 VS Code 之一以获得更好的开发体验。Flutter 官方提供了这两款编辑器插件，通过 IDE 和插件可获得代码补全、语法高亮、widget 编辑辅助、运行和调试支持等功能。

# Android Studio 配置与使用

由于 Android Studio 是基于 IntelliJ IDEA 开发的，所以读者也可以使用 IntelliJ IDEA。

# 安装 Flutter 和 Dart 插件

需要安装两个插件:

Flutter 插件：支持 Flutter 开发工作流 (运行、调试、热重载等)。
Dart 插件：提供代码分析 (输入代码时进行验证、代码补全等)。

安装步骤：

启动 Android Studio。
打开插件首选项 (macOS：Preferences>Plugins, Windows：File>Settings>Plugins)。
选择 Browse repositories…，选择 flutter 插件并点击 install 。
重启 Android Studio 后插件生效。

接下来，让我们用 Android Studio 创建一个 Flutter 项目，然后运行它，并体验 “热重载”。

# 创建 Flutter 应用

选择 File>New Flutter Project 。
选择 Flutter application 作为 project 类型，然后点击 Next。
输入项目名称 (如 myapp )，然后点击 Next。
点击 Finish。
等待 Android Studio 安装 SDK 并创建项目。

上述命令创建一个 Flutter 项目，项目名为 myapp，其中包含一个使用 Material 组件 (opens new window) (opens new window) 的简单演示应用程序。

在项目目录中，您应用程序的代码位于 lib/main.dart 。

# 运行应用程序

定位到 Android Studio 工具栏，如图 1-2 所示：
在 target selector 中，选择一个运行该应用的 Android 设备。如果没有列出可用，请选择 Tools>Android>AVD Manager 并在那里创建一个。
在工具栏中点击 Run 图标。
如果一切正常，您应该在您的设备或模拟器上会看到启动的应用程序，如图 1-3：

# 体验热重载

Flutter 可以通过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态。简单的对代码进行更改，然后告诉 IDE 或命令行工具你需要重新加载（点击 reload 按钮），你就会在你的设备或模拟器上看到更改。

打开 lib/main.dart 文件
将字符串 'You have pushed the button this many times:' 更改为 'You have clicked the button this many times:'
不要按 “停止” 按钮；让您的应用继续运行.
要查更改，请调用 Save ( cmd-s / ctrl-s )，或者点击 热重载按钮 (带有闪电⚡️图标的按钮)。

你会立即在运行的应用程序中看到更新的字符串。

# 参考

《Flutter 实战・第二版》 (opens new window)

上次更新: 2024/10/02, 17:20:49

← 跟着官方示例学习Next.js Dart语言→