如果你恰好是一名前端工程师,且对 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
(完)
领取专属 10元无门槛券
私享最新 技术干货