已完本玄幻小说排行榜,盗墓笔记有声小说,古风小说君子以泽

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

為前端工程師準(zhǔn)備的Flutter入門指南

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

創(chuàng)新互聯(lián)公司專注于新?lián)崞髽I(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。新?lián)峋W(wǎng)站建設(shè)公司,為新?lián)岬鹊貐^(qū)提供建站服務(wù)。全流程按需網(wǎng)站建設(shè)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

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

本文結(jié)構(gòu)如下：

基礎(chǔ)布局
位置與大小
圖形/形狀
文本

注：本文只摘錄 Web 到 Flutter 中一些特性的轉(zhuǎn)換介紹，詳細(xì)及完整的使用方法與語法請查閱 Flutter/Dart 官網(wǎng) https://flutter.io, https://flutter.cn 與 https://www.dartlang.org.

本文示例中默認(rèn)已包含如下假設(shè)：

HTML 文件均會以開頭，且為了與 Flutter 模型保持一致，所有 HTML 元素的 CSS 盒模型被設(shè)置為 border-box。

 
 
 
 
  
  
  
  { 
  
  
  
    box-sizing: border-box; 
  
  
  
  }

在 Flutter 中，為了保持語法簡潔，示例中所用的 “Lorem ipsum” 文本的默認(rèn)樣式由如下 bold24Roboto 變量定義：

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

Flutter UI 采用聲明式編程，欲了解其與傳統(tǒng)命令式風(fēng)格的不同，請查閱聲明式 UI 介紹。

一、基礎(chǔ)布局

先來看看最常見的一些 UI 布局操作。

1.1 文本樣式與對齊

我們在 CSS 中設(shè)置的字體樣式、大小以及其他文本屬性，都是 Flutter 中一個 Text widget 子元素 TextStyle 中單獨的屬性。

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

不論是 HTML 還是 Flutter，子元素或者 widget 都默認(rèn)錨定在左上方。

Web

 
 
 
 
  
  
  
   
  
  
  
      Lorem ipsum

.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 屬性來設(shè)置背景顏色。

CSS 示例中我們使用等價的十六進制顏色表示。

Web

 
 
 
 
  
  
  
   
  
  
  
    Lorem ipsum

.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 實現(xiàn)相似的效果，其父元素則需要使用一個 flex 或者 table-cell 顯示布局。本節(jié)示例使用的是 flex 布局。

Web

 
 
 
 
  
  
  
   
  
  
  
    Lorem ipsum

.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 設(shè)置容器寬度

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

Web

 
 
 
 
  
  
  
   
  
  
  
     
  
  
  
      Lorem ipsum

.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 的位置、大小以及背景進行更復(fù)雜的操作。

2.1 絕對定位

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

Web

 
 
 
 
  
  
  
   
  
  
  
     
  
  
  
      Lorem ipsum

.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 旋轉(zhuǎn)

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

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

Web

 
 
 
 
  
  
  
   
  
  
  
     
  
  
  
      Lorem ipsum

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

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

當(dāng)你縮放一個父 widget 時，它的子 widget 也會相應(yīng)被縮放。

新聞中心

其他資訊