为前端工程师筹备的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 机关。

（编辑：河北网）

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