为前端工程师准备的 Flutter 入门指南（上）

如果你恰好是一名前端工程师，且对 Flutter 感兴趣，那么真的是太好了，这篇文章完全就是为你准备的。写惯了 HTML、CSS 与 JavaScript,要不要来是试试 Dart？如果你不熟悉 Flutter 但仍对其感兴趣，可以先看看「让我们在2019年重新认识 Flutter」一文了解些 Flutter 基础。

在接下来的章节中，我们仔细来对比下平时用 HTML/CSS 代码所实现的效果，如果替换为等价的 Flutter/Dart 代码，会是什么样子。本文分上下两篇，整体结构如下：

基础布局（上）

位置与大小（上）

图形/形状（下）

文本（下）

注：本文只摘录 Web 到 Flutter 中一些特性的转换介绍，详细及完整的使用方法与语法请查阅 Flutter/Dart 官网https://flutter.io, https://flutter.cn与https://www.dartlang.org.

本文示例中默认已包含如下假设：

HTML 文件均会以开头，且为了与 Flutter 模型保持一致，所有 HTML 元素的 CSS 盒模型被设置为。

在 Flutter 中，为了保持语法简洁，示例中所用的 "Lorem ipsum" 文本的默认样式由如下变量定义：

注：Flutter UI 采用声明式编程，欲了解其与传统命令式风格的不同，请查阅声明式 UI 介绍。

一、基础布局

先来看看最常见的一些 UI 布局操作。

1.1 文本样式与对齐

我们在 CSS 中设置的字体样式、大小以及其他文本属性，都是 Flutter 中一个Textwidget 子元素TextStyle中单独的属性。

In both HTML and Flutter, child elements or widgets are anchored at the top left, by default.

不论是 HTML 还是 Flutter，子元素或者 widget 都默认锚定在左上方。

Web

Dart

1.2 背景颜色

在 Flutter 中，你可以通过Container的属性来设置背景颜色。

CSS 示例中我们使用等价的十六进制颜色表示。

Web

Dart

1.3 居中元素

在 Flutter 中，Centerwidget 可以将它的子元素水平和垂直居中。

要用 CSS 实现相似的效果，其父元素则需要使用一个 flex 或者 table-cell 显示布局。本节示例使用的是 flex 布局。

Web

Dart

1.4 设置容器宽度

Containerwidget 的宽度可以用它的属性指定，但需要注意的是，和 CSS 中的 max-width 属性用于指定容器可调整的最大宽度值不同的是，这里指定的是一个固定宽度。要在 Flutter 中模拟 max-width 的效果，可以使用 Container 的属性。新建一个带有和属性的BoxConstraintswidget。 而对嵌套的 Container 来说，如果其父元素宽度小于子元素宽度，则子元素实际尺寸以父元素大小为准。

Web

Dart

二、位置与大小

以下示例将展示如何对 widget 的位置、大小以及背景进行更复杂的操作。

2.1 绝对定位

默认情况下， widget 是相对于其父元素定位的。要通过 x-y 坐标指定一个 widget 的绝对位置，请把它嵌套在一个Positionedwidget 中，而该 widget 则需被嵌套在一个Stackwidget 中。

Web

Dart

2.2 旋转

要旋转一个 widget，请将它嵌套在Transformwidget 中。其中，使用 Transform widget 的和属性分别来指定转换原点的具体位置信息。

对于简单的 2D 旋转，widget 是依据弧度在 Z 轴上旋转的。(角度 × π / 180)

Web

Dart

2.3 缩放元素

将元素嵌套在一个Transformwidget 中，可以实现缩放。使用 Transform widget 的和属性分别来指定缩放原点的具体位置信息。

对于沿 x 轴的简单缩放操作，新建一个Matrix4标识对象并用它的 scale() 方法来指定缩放因系数。

当你缩放一个父 widget 时，它的子 widget 也会相应被缩放。

Web

Dart

2.4 线性变换

将元素嵌套在一个Containerwidget 中，可以将线性变换应用在 widget 的背景上。之后，再用 Container widget 的属性生成一个BoxDecoration对象，然后使用 BoxDecoration 的属性来变换背景填充内容。

变换“角度”基于 Alignment (x, y) 取值来定：

如果开始和结束的 x 值相同，变换将是垂直的（0° | 180°）。

如果开始和结束的 y 值相同，变换将是水平的（90° | 270°）。

这里，只展示垂直变换的代码差异：

Web

Dart

（未完待续）