為前端工程師準備的Flutter入門指南

作者：佚名 2019-01-21 15:52:02

在接下來的章節中，我們仔細來對比下平時用 HTML/CSS 代碼所實現的效果，如果替換為等價的 Flutter/Dart 代碼，會是什么樣子。

如果你恰好是一名前端工程師，且對 Flutter 抱有興趣，那么真的是太好了，這篇文章完全就是為你準備的。寫慣了 HTML、CSS 與 JavaScript,要不要來是試試 Dart?如果你不熟悉 Flutter 但仍對其感興趣，可以先看看「讓我們在2019年重新認識 Flutter」一文了解些 Flutter 基礎。

在接下來的章節中，我們仔細來對比下平時用 HTML/CSS 代碼所實現的效果，如果替換為等價的 Flutter/Dart 代碼，會是什么樣子。

本文結構如下：

基礎布局
位置與大小
圖形/形狀
文本

注：本文只摘錄 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 布局。

Web

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

Dart

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

1.4 設置容器寬度

Container widget 的寬度可以用它的 width 屬性指定，但需要注意的是，和 CSS 中的 max-width 屬性用于指定容器可調整的***寬度值不同的是，這里指定的是一個固定寬度。要在 Flutter 中模擬 max-width 的效果，可以使用 Container 的 constraints 屬性。新建一個帶有 minWidth 和 maxWidth 屬性的 BoxConstraints widget。而對嵌套的 Container 來說，如果其父元素寬度小于子元素寬度，則子元素實際尺寸以父元素大小為準。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px;  
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  width: 100%; 
  max-width: 240px;  
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
      ), 
      padding: EdgeInsets.all(16.0), 
      width: 240.0, //max-width is 240.0 
    ), 
  ), 
  width: 320.0,  
  height: 240.0, 
  color: Colors.grey[300], 
);

二、位置與大小

以下示例將展示如何對 widget 的位置、大小以及背景進行更復雜的操作。

2.1 絕對定位

默認情況下， widget 是相對于其父元素定位的。要通過 x-y 坐標指定一個 widget 的絕對位置，請把它嵌套在一個 Positioned widget 中，而該 widget 則需被嵌套在一個 Stack widget 中。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  position: relative;  
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  position: absolute; 
  top: 24px; 
  left: 24px;  
}

Dart

var container = Container( // grey box 
  child: Stack( 
    children: [ 
      Positioned( // red box 
        child:  Container( 
          child: Text( 
            "Lorem ipsum", 
            style: bold24Roboto, 
          ), 
          decoration: BoxDecoration( 
            color: Colors.red[400], 
          ), 
          padding: EdgeInsets.all(16.0), 
        ), 
        left: 24.0, 
        top: 24.0, 
      ), 
    ], 
  ),  
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

2.2 旋轉

要旋轉一個 widget，請將它嵌套在 Transform widget 中。其中，使用 Transform widget 的 alignment 和 origin 屬性分別來指定轉換原點的具體位置信息。

對于簡單的 2D 旋轉，widget 是依據弧度在 Z 軸上旋轉的。(角度 × π / 180)

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  transform: rotate(15deg);  
}

Dart

var container = Container( // gray box 
  child: Center( 
    child:  Transform( 
      child:  Container( // red box 
        child: Text( 
          "Lorem ipsum", 
          style: bold24Roboto, 
          textAlign: TextAlign.center, 
        ), 
        decoration: BoxDecoration( 
          color: Colors.red[400], 
        ), 
        padding: EdgeInsets.all(16.0), 
      ), 
      alignment: Alignment.center, 
      transform: Matrix4.identity() 
        ..rotateZ(15 * 3.1415927 / 180), 
    ),  
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

2.3 縮放元素

將元素嵌套在一個 Transform widget 中，可以實現縮放。使用 Transform widget 的 alignment 和 origin 屬性分別來指定縮放原點的具體位置信息。

對于沿 x 軸的簡單縮放操作，新建一個 Matrix4 標識對象并用它的 scale() 方法來指定縮放因系數。

當你縮放一個父 widget 時，它的子 widget 也會相應被縮放。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  transform: scale(1.5);  
}

Dart

var container = Container( // gray box 
  child: Center( 
    child:  Transform( 
      child:  Container( // red box 
        child: Text( 
          "Lorem ipsum", 
          style: bold24Roboto, 
          textAlign: TextAlign.center, 
        ), 
        decoration: BoxDecoration( 
          color: Colors.red[400], 
        ), 
        padding: EdgeInsets.all(16.0), 
      ), 
      alignment: Alignment.center, 
      transform: Matrix4.identity() 
        ..scale(1.5), 
     ),  
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

2.4 線性變換

將元素嵌套在一個 Container widget 中，可以將線性變換應用在 widget 的背景上。之后，再用 Container widget 的 decoration 屬性生成一個 BoxDecoration 對象，然后使用 BoxDecoration 的 gradient 屬性來變換背景填充內容。

變換“角度”基于 Alignment (x, y) 取值來定：

如果開始和結束的 x 值相同，變換將是垂直的(0°180°)。
如果開始和結束的 y 值相同，變換將是水平的(90°270°)。

這里，只展示垂直變換的代碼差異：

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  padding: 16px; 
  color: #ffffff; 
  background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);  
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        gradient: LinearGradient( 
          begin: const Alignment(0.0, -1.0), 
          end: const Alignment(0.0, 0.6), 
          colors: <Color>[ 
            const Color(0xffef5350), 
            const Color(0x00ef5350) 
          ], 
        ), 
      ),  
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

三、圖形/形狀

以下示例將展示如何新建和自定義圖形。

3.1 圓角

在矩形上實現圓角，可以用 BoxDecoration 對象的 borderRadius 屬性。新建一個 BorderRadius 對象來指定每個圓角的半徑大小。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* gray 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  border-radius: 8px;  
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red circle 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
        borderRadius: BorderRadius.all( 
          const Radius.circular(8.0), 
        ),  
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

3.2 陰影

在 CSS 中你可以通過 box-shadow 屬性快速指定陰影偏移與模糊范圍。比如如下兩個盒陰影的屬性設置：

xOffset: 0px, yOffset: 2px, blur: 4px, color: black @80% alpha
xOffset: 0px, yOffset: 06x, blur: 20px, color: black @50% alpha

在 Flutter 中，每個屬性與其取值都是單獨指定的。請使用 BoxDecoration 的 boxShadow 屬性來生成一系列 BoxShadow widget。你可以定義一個或多個 BoxShadow widget，這些 widget 共同用于設置陰影深度、顏色等等。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 
              0 6px 20px rgba(0, 0, 0, 0.5); 
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
        boxShadow: <BoxShadow>[ 
          BoxShadow ( 
            color: const Color(0xcc000000), 
            offset: Offset(0.0, 2.0), 
            blurRadius: 4.0, 
          ), 
          BoxShadow ( 
            color: const Color(0x80000000), 
            offset: Offset(0.0, 6.0), 
            blurRadius: 20.0, 
          ), 
        ],  
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  decoration: BoxDecoration( 
    color: Colors.grey[300], 
  ), 
  margin: EdgeInsets.only(bottom: 16.0), 
);

3.3 圓與橢圓

盡管 CSS 中有基礎圖形，CSS 中一個生成圓的變通方案是：將矩形的四邊 border-radius 均設成50%。

雖然 BoxDecoration 的 borderRadius 屬性支持這樣設置，Flutter 為 BoxShape enum 提供一個 shape 屬性也用于實現同樣的目的。

Web

<div class="greybox"> 
  <div class="redcircle"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* gray 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redcircle { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  text-align: center; 
  width: 160px; 
  height: 160px; 
  border-radius: 50%;  
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red circle 
      child: Text( 
        "Lorem ipsum", 
        style: bold24Roboto, 
        textAlign: TextAlign.center,  
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
        shape: BoxShape.circle,  
      ), 
      padding: EdgeInsets.all(16.0), 
      width: 160.0, 
      height: 160.0,  
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

四、文本

以下示例展示了如何設置字體和其他文本屬性，除此外還包括一些特性比如如何變換文本字符、自定義間距以及生成摘錄。

4.1 文字間距

在 CSS 中你可以通過分別給 letter-spacing 和 word-spacing 屬性的長度賦值來指定每個字母以及每個單詞間的空白距離。距離的單位可以是 px, pt, cm, em 等等。

在 Flutter 中，你可以在 Text widget 子元素 TextStyle 的 letterSpacing 與 wordSpacing 屬性中將間距設置為邏輯像素(允許負值)。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  letter-spacing: 4px;  
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum", 
        style: TextStyle( 
          color: Colors.white, 
          fontSize: 24.0, 
          fontWeight: FontWeight.w900, 
          letterSpacing: 4.0,  
        ), 
      ), 
      decoration: BoxDecoration( 
        color: Colors.red[400], 
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

4.2 內聯樣式

一個 Text widget 可以展示同一類樣式的文本。為了展現具有多種樣式的文本，需要改用 RichText widget。它的 text 屬性可以指定一個或多個可以單獨設置樣式的 TextSpan widget。

在下例中，”Lorem” 位于 TextSpan widget 中，具有默認(繼承自其父元素)文本樣式，”ipsum” 位于具有自定義樣式、單獨的一個 TextSpan 中。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem <em>ipsum</em>  
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto;  
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
} 
 .redbox em { 
  font: 300 48px Roboto; 
  font-style: italic; 
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child:  RichText( 
        text: TextSpan( 
          style: bold24Roboto, 
          children: <TextSpan>[ 
            TextSpan(text: "Lorem "), 
            TextSpan( 
              text: "ipsum", 
              style: TextStyle( 
                fontWeight: FontWeight.w300, 
                fontStyle: FontStyle.italic, 
                fontSize: 48.0, 
              ), 
            ), 
          ], 
        ), 
      ),  
      decoration: BoxDecoration( 
        backgroundColor: Colors.red[400], 
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

4.3 文本摘要

在 Web 中，我們常用省略號處理溢出的文本內容，且在 HTML/CSS 中，摘要不能超過一行。如果要在多行之后進行截斷，那么就需要 JavaScript 的幫助了。

在 Flutter 中，使用 Text widget 的 maxLines 屬性來指定包含在摘要中的行數，以及 overflow 屬性來處理溢出文本。

Web

<div class="greybox"> 
  <div class="redbox"> 
    Lorem ipsum dolor sit amet, consec etur 
  </div> 
</div> 
 
.greybox { 
  background-color: #e0e0e0; /* grey 300 */ 
  width: 320px; 
  height: 240px; 
  font: 900 24px Roboto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.redbox { 
  background-color: #ef5350; /* red 400 */ 
  padding: 16px; 
  color: #ffffff; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;  
}

Dart

var container = Container( // grey box 
  child: Center( 
    child: Container( // red box 
      child: Text( 
        "Lorem ipsum dolor sit amet, consec etur", 
        style: bold24Roboto, 
        overflow: TextOverflow.ellipsis, 
        maxLines: 1,  
      ), 
      decoration: BoxDecoration( 
        backgroundColor: Colors.red[400], 
      ), 
      padding: EdgeInsets.all(16.0), 
    ), 
  ), 
  width: 320.0, 
  height: 240.0, 
  color: Colors.grey[300], 
);

Teaser 截圖自 flutter.io 官網。

責任編輯：未麗燕來源： Joe's Blog