专栏名称: 众成翻译

翻译，求知的另一种表达

Flutter for JavaScript Developers

众成翻译 · 掘金 · · 2018-07-19 01:44

正文

Flutter 是一个致力于“构建高性能和高精确性iOS与Android应用”的跨平台移动应用SDK。

来源于文档的解释:

Flutter 包含一个现代的“React风格”框架、一个2D的渲染引擎、多个现成部件与开发工具。

我将尝试在JS-npm生态系统以及Flutter / Dart与 Pub 包管理系统之间进行比对，希望这篇文章能够为JavaScript开发人员提供对Flutter快速而简便的介绍。

如果您有兴趣了解社区里的Flutter教程，库，公告和更新，推荐您订阅bi-weekly 上的 Flutter Newsletter 。

我在 React Native EU 上的演讲 React Native — Cross Platform & Beyond 中讨论并演示了一些在React生态系统里不同的技术，包含 React Native Web , React Primitives , 和 ReactXP ，与此同时我也对 Weex 和 Flutter 进行了讨论。

在过去几年间我看到的所有前端技术中，Flutter是在亲自试验之后，最让我感到激动的。在这篇文章中，我会解释自己激动的原因，同时给出一个让你可以尽快开始使用的Flutter指南。

如果你理解我，那么我就知道你在想什么…

我是一个有了2.5年经验的React和React Native开发者。我仍然非常看好React / React Native，同时我也知道目前许多大公司正在频繁使用它们，但我总是喜欢看到其他想法，并寻找其他方法来实现类似的目标，无论是向他们去学习还是改变现有的技术方案。

Flutter

我的结论如下: 我认为Flutter是惊艳的，它在不久的将来就会是一个可行的选择。

在过去几周使用Flutter SDK之后，我正在使用它构建我的第一个应用程序，并且到目前为止我真的很喜欢这个过程。

在我开始讨论如何开始使用Flutter之前，我将首先回顾一下我对Flutter SDK的优缺点的看法。

优点：

通过那些有核心团队持续进行更新维护的的UI库（Material, Cupertino）进行构建。
为了Flutter的需求，Dart和Flutter的团队一起致力于优化移动端的Dart虚拟机。
文档非常赞 😍。
优秀的命令行工具。
启动和运行的过程对我来说顺利而轻松，不会遇到很多障碍和错误。
配合开箱即用的热重新加载进行调试体验很好。一系列优秀调试技术的文档。
由核心团队构建和维护，保守而稳定的导航库
Dart语言已有6年历史并且非常成熟。虽然Dart是一种基于类的面向对象编程语言，但如果您正在进行函数式编程，Dart确实具有一流的函数并支持许多函数式编程结构。
Dart比我预想的更容易接受，我真的很喜欢它。
Dart是一种开箱即用的类型语言，没有任何其他配置，比如TypeScript / Flow。
如果你用过React，你会发现Flutter拥有相似的数据状态管理的方案（生命周期方法和setState）。

缺点

你需要去学习Dart（相信我这并不难）。
仍在测试阶段。
仅仅应用于iOS和Android这两个系统。
插件生态系统还不够成熟。截止到2017年9月， pub.dartlang.org/flutter 上只有 70+ 的Flutter插件项目。
布局和样式是需要学习的全新范例/API。
需要学习不同的项目部署的配置文件 ( pubspec.yaml vs package.json )。

开始入门/其他观察

我正在使用安装有 Dart扩展插件的VS Code进行开发，这让我获得了非常好的开发体验。Flutter的文档强烈推荐我们使用 IntelliJ IDE 进行开发，它拥有一些内置支持实时热加载的东西，而VSCode据我所知还没有。
模块系统/包管理系统 Pub Dart 与npm有很大不同。根据你对npm的看法，这可好可坏。
我开始时并不了解Dart，但是很快就学会它了。它让我想起了很多TypeScript，并且与JavaScript有一些相似之处。
文档中有一些非常棒的CodeLabs和教程对我有很大的帮助，我建议你查看它们: 1. 构建UIS 2. 添加Firebase 3. 构建布局 4. 添加交互

说的够多了，让我们开始创建一个新项目！

安装命令行工具 (macOS)

想要在Windows上开始，请阅读 这些 文章。

要查看完整的macOS设置说明, 请阅读 这些 文章。

首先，我们需要克隆包含Flutter命令行二进制文件的库，并将其添加到我们的路径中。我将这个项目克隆到一个文件夹中，并保存了那些二进制文件，然后在$HOME/.bashrc/和$HOME/.zshrc文件中添加了一个新的路径。

克隆项目:

https://github.com/flutter/flutter.git

2. 添加路径:

export PATH=$HOME/bin/flutter/bin:$PATH (or whatever the path is to your installation)

3. 从命令行运行flutter doctor以确保识别出Flutter的路径，并查看是否需要安装任何依赖项才能完成设置：

flutter doctor

安装其它依赖

如果您要为iOS进行部署，则必须安装Xcode，而对于Android，您必须安装Android Studio。

要了解有关安装每个平台的更多信息，请参阅文档 _这里_

创建您的第一个Flutter应用程序

现在我们已经安装了Flutter的命令行工具，我们可以创建我们的第一个应用程序。为此，我们需要运行flutter create命令：

flutter create myapp

这将为您创建一个新的应用程序。现在，切换到新目录并打开iOS模拟器或Android模拟器，然后运行以下命令：

flutter run

这将在您打开的模拟器中启动应用程序。如果您同时打开iOS和Android模拟器，则可以传入要在其中运行应用程序的模拟器：

flutter run -d android / flutter run -d iPhone

或者在两个中运行：

flutter run -d all

您应该会在控制台得到一些有关重新加载的应用程序信息：

项目结构

你正在运行的代码在lib/main.dart文件里。

你还会注意到我们有一个android文件夹和一个iOS文件夹，我们的本机项目就在这里。

我们项目的配置在pubspec.yaml文件里，这和JavaScript项目中的package.json文件相似。

现在我们来看看lib/main.dart文件

在文件最上方，我们看到了import:

import 'package:flutter/material.dart';

这来自哪里？好吧，在pubspec.yaml文件中，你会注意到在依赖关系下我们有一个单独的flutter依赖，我们在这里引用它作为一个package：flutter/。如果我们想要添加和导入其他依赖项，我们需要使用新的依赖项更新pubspec.yaml，然后将它们作为导入使用。

在这个文件中，我们还看到顶部有一个名为main的函数。在Dart中， main 是特殊的，它是必需而且最高等级的函数，也是应用开始执行的地方。因为Flutter是使用Dart构建的，所以这也是我们项目的主要切入点。

void main() {  runApp(new MyApp());}

runApp函数调用了new MyApp()，它本身对一个类进行调用，这点类似于React应用，我们有一个由其他组件组成的主要组件，然后在ReactDOM.render或AppRegistry.registerComponent中进行呈现。

部件

Flutter的技术综述中提到的一个核心准则就是“一切都是部件”。

部件是每个Flutter应用程序的基本构建块。每个部件都是用户界面的一部分的不可变声明。与分离视图（views），控制器（controllers），布局（layouts）和其他属性的其他框架不同，Flutter具有一致的统一对象模型：部件。

在JavaScript和Web术语的方面，您可以想到一个类似于您如何思考组件的方式来思考部件。部件通常由类内部组成，这些类可能也可能具有或者不具有一些本地状态和方法。

如果你去查看main.dart，你会看到对这些类的引用： StatelessWidget, StatefulWidget, Center ,和 Text ——这些都被视为部件。想要看全部可用的部件，可以查阅文档。

布局与样式

虽然Dart和Flutter框架的大部分都非常简单，但使用布局和样式最初还是有点难以理解。

要记住的关键是，与Web样式与React Native的策略“视图层（Views）执行所有布局和一部分样式”不同的是，Layout是由 你选择的Widget类型 和 它布局与样式的属性 的组合所决定的，这通常是具体取决于您正在使用部件的类型而不同。

比如， Column 采用一系列子项而不是任何样式属性（只有布局属性，比如 CrossAxisAlignment 和 direction 等等），而 Container 采用布局和样式属性的组合。