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

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

在接下来的章节中，我们仔细来对比下平时用 HTML/CSS 代码所实现的效果，如果替换为等价的 Flutter/Dart 代码，会是什么样子。本文分上下两篇，上篇请点击「为前端工程师准备的 Flutter 入门指南（上）」

文章链接

或下图查看。

下篇包含以下两个部分：

图形/形状

文本

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

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

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

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

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

三、图形/形状

以下示例将展示如何新建和自定义图形。

3.1 圆角

在矩形上实现圆角，可以用BoxDecoration对象的属性。新建一个BorderRadius对象来指定每个圆角的半径大小。

Web

Dart

3.2 阴影

在 CSS 中你可以通过 box-shadow 属性快速指定阴影偏移与模糊范围。比如如下两个盒阴影的属性设置：

在 Flutter 中，每个属性与其取值都是单独指定的。请使用 BoxDecoration 的属性来生成一系列BoxShadowwidget。你可以定义一个或多个 BoxShadow widget，这些 widget 共同用于设置阴影深度、颜色等等。

Web

Dart

3.3 圆与椭圆

尽管 CSS 中有基础图形，CSS 中一个生成圆的变通方案是：将矩形的四边 border-radius 均设成50%。

虽然BoxDecoration的属性支持这样设置，Flutter 为BoxShape enum提供一个属性也用于实现同样的目的。

Web

Dart

四、文本

以下示例展示了如何设置字体和其他文本属性，除此外还包括一些特性比如如何变换文本字符、自定义间距以及生成摘录。

4.1 文字间距

在 CSS 中你可以通过分别给 letter-spacing 和 word-spacing 属性的长度赋值来指定每个字母以及每个单词间的空白距离。距离的单位可以是 px, pt, cm, em 等等。

在 Flutter 中，你可以在 Text widget 子元素TextStyle的与属性中将间距设置为逻辑像素（允许负值）。

Web

Dart

4.2 内联样式

一个Textwidget 可以展示同一类样式的文本。为了展现具有多种样式的文本，需要改用RichTextwidget。它的属性可以指定一个或多个可以单独设置样式的TextSpanwidget。

在下例中，"Lorem" 位于 TextSpan widget 中，具有默认（继承自其父元素）文本样式，"ipsum" 位于具有自定义样式、单独的一个 TextSpan 中。

Web

Dart

4.3 文本摘要

在 Web 中，我们常用省略号处理溢出的文本内容，且在 HTML/CSS 中，摘要不能超过一行。 如果要在多行之后进行截断，那么就需要 JavaScript 的帮助了。

在 Flutter 中，使用Textwidget 的属性来指定包含在摘要中的行数，以及属性来处理溢出文本。

Web

Dart

（完）