flutter text 左对齐_为前端工程师准备的 Flutter 入门指南（上）

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

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

1. 基础布局(上)

2. 位置与大小(上)

3. 图形/形状(下)

4. 文本(下)

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

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

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

{ box-sizing: border-box; }

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

TextStyle bold24Roboto = TextStyle(    color: Colors.white,    fontSize: 24.0,    fontWeight: FontWeight.w900, );

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

一、基础布局

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

1.1 文本样式与对齐

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

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

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

• Web

<div class="greybox">    Lorem ipsumdiv>
.greybox {  background-color: #e0e0e0; /* grey 300 */  width: 320px;  height: 240px;  font: 900 24px Georgia; }

• Dart

var conta