为前端工程师准备的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 ipsum 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Georgia; 
} 

Dart

var container = Container( // grey box 
  child: Text( 
    "Lorem ipsum", 
    style: TextStyle( 
      fontSize: 24.0, 
      fontWeight: FontWeight.w900, 
      fontFamily: "Georgia", 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
); 

1.2 背景颜色

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

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

Web

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

Dart

var container = Container( // grey box 
    child: Text( 
      "Lorem ipsum", 
      style: bold24Roboto, 
    ), 
    width: 320.0, 
    height: 240.0, 
    color: Colors.grey[300], 
  ); 

1.3 居中元素

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

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

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!