自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：佚名
開發(fā) 前端 Android
在接下來的章節(jié)中，我們仔細(xì)來對(duì)比下平時(shí)用 HTML/CSS 代碼所實(shí)現(xiàn)的效果，如果替換為等價(jià)的 Flutter/Dart 代碼，會(huì)是什么樣子。

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

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

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

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

  1. 基礎(chǔ)布局
  2. 位置與大小
  3. 圖形/形狀
  4. 文本

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

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

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

  1. { 
  2.   box-sizing: border-box; 
  3. } 

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

  1. TextStyle bold24Roboto = TextStyle( 
  2.   color: Colors.white, 
  3.   fontSize: 24.0, 
  4.   fontWeight: FontWeight.w900, 
  5. ); 

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

一、基礎(chǔ)布局

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

1.1 文本樣式與對(duì)齊

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

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

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

Web 

  1. <div class="greybox"> 
  2.     Lorem ipsum 
  3. </div> 
  4.  
  5. .greybox { 
  6.   background-color: #e0e0e0; /* grey 300 */ 
  7.   width: 320px; 
  8.   height: 240px; 
  9.   font: 900 24px Georgia; 
  10. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Text( 
  3.     "Lorem ipsum", 
  4.     style: TextStyle( 
  5.       fontSize: 24.0, 
  6.       fontWeight: FontWeight.w900, 
  7.       fontFamily: "Georgia", 
  8.     ), 
  9.   ), 
  10.   width: 320.0, 
  11.   height: 240.0, 
  12.   color: Colors.grey[300], 
  13. ); 

1.2 背景顏色

在 Flutter 中，你可以通過 Container 的 decoration 屬性來設(shè)置背景顏色。

CSS 示例中我們使用等價(jià)的十六進(jìn)制顏色表示。

Web 

  1. <div class="greybox"> 
  2.   Lorem ipsum 
  3. </div> 
  4.  
  5. .greybox { 
  6.   background-color: #e0e0e0;  /* grey 300 */ 
  7.   width: 320px; 
  8.   height: 240px; 
  9.   font: 900 24px Roboto; 
  10. } 

Dart 

  1. var container = Container( // grey box 
  2.     child: Text( 
  3.       "Lorem ipsum", 
  4.       style: bold24Roboto, 
  5.     ), 
  6.     width: 320.0, 
  7.     height: 240.0, 
  8.     color: Colors.grey[300], 
  9.   ); 

1.3 居中元素

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

要用 CSS 實(shí)現(xiàn)相似的效果，其父元素則需要使用一個(gè) flex 或者 table-cell 顯示布局。本節(jié)示例使用的是 flex 布局。

Web 

  1. <div class="greybox"> 
  2.   Lorem ipsum 
  3. </div> 
  4.  
  5. .greybox { 
  6.   background-color: #e0e0e0; /* grey 300 */ 
  7.   width: 320px; 
  8.   height: 240px; 
  9.   font: 900 24px Roboto; 
  10.   display: flex; 
  11.   align-items: center; 
  12.   justify-content: center;  
  13. } 

Dart 

  1. var container = Container( // grey box 
  2.   child:  Center( 
  3.     child:  Text( 
  4.       "Lorem ipsum", 
  5.       style: bold24Roboto, 
  6.     ), 
  7.   ), 
  8.   width: 320.0, 
  9.   height: 240.0, 
  10.   color: Colors.grey[300], 
  11. ); 

1.4 設(shè)置容器寬度

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

Web 

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px;  
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   width: 100%; 
  21.   max-width: 240px;  
  22. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red box 
  4.       child: Text( 
  5.         "Lorem ipsum", 
  6.         style: bold24Roboto, 
  7.       ), 
  8.       decoration: BoxDecoration( 
  9.         color: Colors.red[400], 
  10.       ), 
  11.       padding: EdgeInsets.all(16.0), 
  12.       width: 240.0, //max-width is 240.0 
  13.     ), 
  14.   ), 
  15.   width: 320.0,  
  16.   height: 240.0, 
  17.   color: Colors.grey[300], 
  18. ); 

二、位置與大小

以下示例將展示如何對(duì) widget 的位置、大小以及背景進(jìn)行更復(fù)雜的操作。

2.1 絕對(duì)定位

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

Web 

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   position: relative;  
  13. } 
  14. .redbox { 
  15.   background-color: #ef5350; /* red 400 */ 
  16.   padding: 16px; 
  17.   color: #ffffff; 
  18.   position: absolute; 
  19.   top: 24px; 
  20.   left: 24px;  
  21. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Stack( 
  3.     children: [ 
  4.       Positioned( // red box 
  5.         child:  Container( 
  6.           child: Text( 
  7.             "Lorem ipsum", 
  8.             style: bold24Roboto, 
  9.           ), 
  10.           decoration: BoxDecoration( 
  11.             color: Colors.red[400], 
  12.           ), 
  13.           padding: EdgeInsets.all(16.0), 
  14.         ), 
  15.         left: 24.0, 
  16.         top: 24.0, 
  17.       ), 
  18.     ], 
  19.   ),  
  20.   width: 320.0, 
  21.   height: 240.0, 
  22.   color: Colors.grey[300], 
  23. ); 

2.2 旋轉(zhuǎn)

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

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

Web  

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   transform: rotate(15deg);  
  21. } 

Dart 

  1. var container = Container( // gray box 
  2.   child: Center( 
  3.     child:  Transform( 
  4.       child:  Container( // red box 
  5.         child: Text( 
  6.           "Lorem ipsum", 
  7.           style: bold24Roboto, 
  8.           textAlign: TextAlign.center, 
  9.         ), 
  10.         decoration: BoxDecoration( 
  11.           color: Colors.red[400], 
  12.         ), 
  13.         padding: EdgeInsets.all(16.0), 
  14.       ), 
  15.       alignment: Alignment.center, 
  16.       transform: Matrix4.identity() 
  17.         ..rotateZ(15 * 3.1415927 / 180), 
  18.     ),  
  19.   ), 
  20.   width: 320.0, 
  21.   height: 240.0, 
  22.   color: Colors.grey[300], 
  23. ); 

2.3 縮放元素

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

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

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

Web 

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   transform: scale(1.5);  
  21. } 

Dart 

  1. var container = Container( // gray box 
  2.   child: Center( 
  3.     child:  Transform( 
  4.       child:  Container( // red box 
  5.         child: Text( 
  6.           "Lorem ipsum", 
  7.           style: bold24Roboto, 
  8.           textAlign: TextAlign.center, 
  9.         ), 
  10.         decoration: BoxDecoration( 
  11.           color: Colors.red[400], 
  12.         ), 
  13.         padding: EdgeInsets.all(16.0), 
  14.       ), 
  15.       alignment: Alignment.center, 
  16.       transform: Matrix4.identity() 
  17.         ..scale(1.5), 
  18.      ),  
  19.   width: 320.0, 
  20.   height: 240.0, 
  21.   color: Colors.grey[300], 
  22. ); 

2.4 線性變換

將元素嵌套在一個(gè) Container widget 中，可以將線性變換應(yīng)用在 widget 的背景上。之后，再用 Container widget 的 decoration 屬性生成一個(gè) BoxDecoration 對(duì)象，然后使用 BoxDecoration 的 gradient 屬性來變換背景填充內(nèi)容。

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

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

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

Web  

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   padding: 16px; 
  18.   color: #ffffff; 
  19.   background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);  
  20. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red box 
  4.       child: Text( 
  5.         "Lorem ipsum", 
  6.         style: bold24Roboto, 
  7.       ), 
  8.       decoration: BoxDecoration( 
  9.         gradient: LinearGradient( 
  10.           begin: const Alignment(0.0, -1.0), 
  11.           end: const Alignment(0.0, 0.6), 
  12.           colors: <Color>[ 
  13.             const Color(0xffef5350), 
  14.             const Color(0x00ef5350) 
  15.           ], 
  16.         ), 
  17.       ),  
  18.       padding: EdgeInsets.all(16.0), 
  19.     ), 
  20.   ), 
  21.   width: 320.0, 
  22.   height: 240.0, 
  23.   color: Colors.grey[300], 
  24. ); 

三、圖形/形狀

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

3.1 圓角

在矩形上實(shí)現(xiàn)圓角，可以用 BoxDecoration 對(duì)象的 borderRadius 屬性。新建一個(gè) BorderRadius 對(duì)象來指定每個(gè)圓角的半徑大小。

Web 

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* gray 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   border-radius: 8px;  
  21. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red circle 
  4.       child: Text( 
  5.         "Lorem ipsum", 
  6.         style: bold24Roboto, 
  7.       ), 
  8.       decoration: BoxDecoration( 
  9.         color: Colors.red[400], 
  10.         borderRadius: BorderRadius.all( 
  11.           const Radius.circular(8.0), 
  12.         ),  
  13.       ), 
  14.       padding: EdgeInsets.all(16.0), 
  15.     ), 
  16.   ), 
  17.   width: 320.0, 
  18.   height: 240.0, 
  19.   color: Colors.grey[300], 
  20. ); 

3.2 陰影

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

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

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

Web 

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 
  21.               0 6px 20px rgba(0, 0, 0, 0.5); 
  22. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red box 
  4.       child: Text( 
  5.         "Lorem ipsum", 
  6.         style: bold24Roboto, 
  7.       ), 
  8.       decoration: BoxDecoration( 
  9.         color: Colors.red[400], 
  10.         boxShadow: <BoxShadow>[ 
  11.           BoxShadow ( 
  12.             color: const Color(0xcc000000), 
  13.             offset: Offset(0.0, 2.0), 
  14.             blurRadius: 4.0, 
  15.           ), 
  16.           BoxShadow ( 
  17.             color: const Color(0x80000000), 
  18.             offset: Offset(0.0, 6.0), 
  19.             blurRadius: 20.0, 
  20.           ), 
  21.         ],  
  22.       ), 
  23.       padding: EdgeInsets.all(16.0), 
  24.     ), 
  25.   ), 
  26.   width: 320.0, 
  27.   height: 240.0, 
  28.   decoration: BoxDecoration( 
  29.     color: Colors.grey[300], 
  30.   ), 
  31.   margin: EdgeInsets.only(bottom: 16.0), 
  32. ); 

3.3 圓與橢圓

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

雖然 BoxDecoration 的 borderRadius 屬性支持這樣設(shè)置，F(xiàn)lutter 為 BoxShape enum 提供一個(gè) shape 屬性也用于實(shí)現(xiàn)同樣的目的。

Web  

  1. <div class="greybox"> 
  2.   <div class="redcircle"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* gray 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redcircle { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   text-align: center; 
  21.   width: 160px; 
  22.   height: 160px; 
  23.   border-radius: 50%;  
  24. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red circle 
  4.       child: Text( 
  5.         "Lorem ipsum", 
  6.         style: bold24Roboto, 
  7.         textAlign: TextAlign.center,  
  8.       ), 
  9.       decoration: BoxDecoration( 
  10.         color: Colors.red[400], 
  11.         shape: BoxShape.circle,  
  12.       ), 
  13.       padding: EdgeInsets.all(16.0), 
  14.       width: 160.0, 
  15.       height: 160.0,  
  16.     ), 
  17.   ), 
  18.   width: 320.0, 
  19.   height: 240.0, 
  20.   color: Colors.grey[300], 
  21. ); 

四、文本

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

4.1 文字間距

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

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

Web  

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   letter-spacing: 4px;  
  21. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red box 
  4.       child: Text( 
  5.         "Lorem ipsum", 
  6.         style: TextStyle( 
  7.           color: Colors.white, 
  8.           fontSize: 24.0, 
  9.           fontWeight: FontWeight.w900, 
  10.           letterSpacing: 4.0,  
  11.         ), 
  12.       ), 
  13.       decoration: BoxDecoration( 
  14.         color: Colors.red[400], 
  15.       ), 
  16.       padding: EdgeInsets.all(16.0), 
  17.     ), 
  18.   ), 
  19.   width: 320.0, 
  20.   height: 240.0, 
  21.   color: Colors.grey[300], 
  22. ); 

4.2 內(nèi)聯(lián)樣式

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

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

Web  

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem <em>ipsum</em>  
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto;  
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20. } 
  21.  .redbox em { 
  22.   font: 300 48px Roboto; 
  23.   font-style: italic; 
  24. }  

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red box 
  4.       child:  RichText( 
  5.         text: TextSpan( 
  6.           style: bold24Roboto, 
  7.           children: <TextSpan>[ 
  8.             TextSpan(text: "Lorem "), 
  9.             TextSpan( 
  10.               text: "ipsum", 
  11.               style: TextStyle( 
  12.                 fontWeight: FontWeight.w300, 
  13.                 fontStyle: FontStyle.italic, 
  14.                 fontSize: 48.0, 
  15.               ), 
  16.             ), 
  17.           ], 
  18.         ), 
  19.       ),  
  20.       decoration: BoxDecoration( 
  21.         backgroundColor: Colors.red[400], 
  22.       ), 
  23.       padding: EdgeInsets.all(16.0), 
  24.     ), 
  25.   ), 
  26.   width: 320.0, 
  27.   height: 240.0, 
  28.   color: Colors.grey[300], 
  29. ); 

4.3 文本摘要

在 Web 中，我們常用省略號(hào)處理溢出的文本內(nèi)容，且在 HTML/CSS 中，摘要不能超過一行。 如果要在多行之后進(jìn)行截?cái)?，那么就需? JavaScript 的幫助了。

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

Web  

  1. <div class="greybox"> 
  2.   <div class="redbox"> 
  3.     Lorem ipsum dolor sit amet, consec etur 
  4.   </div> 
  5. </div> 
  6.  
  7. .greybox { 
  8.   background-color: #e0e0e0; /* grey 300 */ 
  9.   width: 320px; 
  10.   height: 240px; 
  11.   font: 900 24px Roboto; 
  12.   display: flex; 
  13.   align-items: center; 
  14.   justify-content: center; 
  15. } 
  16. .redbox { 
  17.   background-color: #ef5350; /* red 400 */ 
  18.   padding: 16px; 
  19.   color: #ffffff; 
  20.   overflow: hidden; 
  21.   text-overflow: ellipsis; 
  22.   white-space: nowrap;  
  23. } 

Dart 

  1. var container = Container( // grey box 
  2.   child: Center( 
  3.     child: Container( // red box 
  4.       child: Text( 
  5.         "Lorem ipsum dolor sit amet, consec etur", 
  6.         style: bold24Roboto, 
  7.         overflow: TextOverflow.ellipsis, 
  8.         maxLines: 1,  
  9.       ), 
  10.       decoration: BoxDecoration( 
  11.         backgroundColor: Colors.red[400], 
  12.       ), 
  13.       padding: EdgeInsets.all(16.0), 
  14.     ), 
  15.   ), 
  16.   width: 320.0, 
  17.   height: 240.0, 
  18.   color: Colors.grey[300], 
  19. ); 

Teaser 截圖自 flutter.io 官網(wǎng)。

責(zé)任編輯：未麗燕 來源： Joe's Blog
前端工程師Flutter代碼
相關(guān)推薦

2019-12-18 10:30:24

前端開發(fā)技術(shù)

2019-07-29 16:05:48

前端DockerNode.js

2015-08-26 14:18:25

Web前端工程師價(jià)值

2015-09-30 10:25:03

前端工程師

2018-11-15 15:55:44

前端工程師Web云計(jì)算

2010-01-13 10:53:51

Web前端工程師定位

2014-12-23 14:55:23

前端

2023-11-02 11:49:22

2016-09-22 16:14:45

前端設(shè)計(jì)Photoshop

2010-01-13 10:10:07

Web前端工程師

2015-03-16 16:01:40

Web前端前端工程師Web

2022-07-29 09:12:44

軟件硬件開發(fā)

2009-02-23 09:41:29

面試軟件測(cè)試工程師

2022-09-16 08:00:00

軟件工程師求職薪酬

2022-03-15 08:00:00

Flutter開發(fā)工具

2019-06-24 09:40:17

前端前端工程師開發(fā)工具

2023-10-30 08:27:50

ML后端學(xué)習(xí)機(jī)器

2022-08-18 08:00:00

BGP非網(wǎng)絡(luò)工程師漏洞

2012-06-28 14:23:32

Web

2021-04-22 09:00:00

軟件工程師代碼
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)