本文是为那些熟悉用 HTML 与 CSS 语法来管理应用页面中元素的开发者准备的。本文会将 HTML/CSS 代码片段替换为等价的 Flutter/Dart 代码。

Flutter 是一个用于构建跨平台应用的框架，它使用 Dart 编程语言。要了解 Dart 编程语言与 Javascript 编程语言的异同，请参考文档 给 JavaScript 开发者的 Dart 编程语言指南。

在 Web 和 Flutter 的布局基础条件中， 布局限制、widget 的大小确定和定位 是重要的区别之一。想要了解更多，你可以阅读 深入理解 Flutter 布局约束。

以下的示例基于如下假设：

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

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

React-style 或 声明式 编程与传统的命令式风格有何不同？为了对比，请查阅 声明式 UI 介绍。

以下示例将向你展示如何执行最常见的 UI 布局操作。

CSS 所处理的字体样式、大小以及其他文本属性，都是一个 Text widget 子元素 TextStyle 中单独的属性。

Text widget 中的 textAlign 属性与 CSS 中的 text-align 属性作用相同，用来控制文本的对齐方向。

在 HTML 和 Flutter 中，子元素或者 widget 的位置都默认在左上方。

在 Flutter 中，你可以通过 Container 的 decoration 或者 color 属性来设置背景颜色。但是，你不能同时设置这两个属性，这有可能导致 decoration 覆盖掉 color。当背景是简单的颜色时，应首选 color 属性，对于其他情况渐变或图像等情况，推荐使用 decoration 属性。

CSS 示例使用十六进制颜色，这等价于 Material 的调色板。

一个 Center widget 可以将它的子 widget 同时以水平和垂直方向居中。

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

要指定一个 Container widget 的宽度，请使用它的 width 属性。与 CSS 中的 max-width 属性用于指定容器可调整的宽度最大值不同的是，这里指定的是一个固定宽度。要在 Flutter 中模拟该效果，可以使用 Container 的 constraints 属性。新建一个带有 minWidth 和 maxWidth 属性的 BoxConstraints widget。

对嵌套的 Container 来说，如果其父元素宽度小于子元素宽度，则子元素会调整尺寸以匹配父元素大小。

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

默认情况下，widget 相对于其父元素定位。

想要通过 x-y 坐标指定一个 widget 的绝对位置，可以把它放在一个 Positioned widget 中，而 Positioned 则需被放在一个 Stack widget 中。

想要旋转一个 widget，请将它放在 Transform widget 中。使用 Transform widget 的 alignment 和 origin 属性分别来指定转换原点（支点）的相对和绝对位置信息。

对于简单的 2D 旋转，例如在 Z 轴上旋转的，创建一个新的 Matrix4 对象，并使用它的 rotateZ() 方法以弧度单位（角度 × π / 180）指定旋转系数。

想要缩放一个 widget，请同样将它放在一个 Transform widget 中。使用 Transform widget 的 alignment 和 origin 属性分别来指定缩放原点（支点）的相对和绝对信息。

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

想要将线性颜色渐变在 widget 的背景上应用，请将它嵌套在一个 Container widget 中。接着将一个 BoxDecoration 对象传递至 Container 的 decoration，然后使用 BoxDecoration 的 gradient 属性来变换背景填充内容。

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

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

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

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

想要在矩形上实现圆角，请用 BoxDecoration 对象的 borderRadius 属性。新建一个 BorderRadius 对象来指定各个圆角的半径大小。

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

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

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

虽然 BoxDecoration 的 borderRadius 属性支持这样设置， Flutter 提供了一个 shape 属性用于实现同样的目的，它的类型是 BoxShape 枚举。

以下示例展示了如何设置字体和其他文本属性。它们同时还展示了如何变换文本字符、自定义间距以及生成摘要。

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

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

一个 Text widget 允许你展示同一类样式的文本。为了展现具有多种样式（本例中，是一个带重音的单词）的文本，你需要改用 RichText widget。它的 text 属性可以设置一个或多个可单独设置样式的 TextSpan。

在接下来的示例中，「Lorem」位于 TextSpan 中，具有默认（继承）文本样式，「ipsum」位于具有自定义样式、单独的一个 TextSpan 中。

一个摘要会展示一个段落中文本的初始行内容，并常用省略号处理溢出的文本内容。

在 Flutter 中，你可以使用 Text widget 的 maxLines 属性来指定包含在摘要中的行数，以及 overflow 属性来处理溢出文本。