1.1.1　FlutterLogo

FlutterLogo組件，顧名思義，是一個(gè)專門用于渲染Flutter徽標(biāo)的組件。常見于Hello World等演示程序，或者用于與Flutter密切相關(guān)的項(xiàng)目，例如宣傳或介紹Flutter的網(wǎng)站，或者Flutter演示程序等。這個(gè)組件的使用方法比較簡單，代碼如下：

FlutterLogo(
  size: 100,
  style: FlutterLogoStyle. stacked,
)

1．尺寸

FlutterLogo組件的尺寸由size屬性設(shè)置，默認(rèn)值為24.0，單位是邏輯像素。Flutter框架中的尺寸或位置信息，例如高度、寬度等，一般都以邏輯像素作為單位。

Flutter框架小知識(shí)

邏輯像素是什么

大家一定非常熟悉像素的概念，即屏幕上一個(gè)個(gè)可以獨(dú)立顯示顏色的小點(diǎn)。例如在一塊1920×1080像素的分辨率的屏幕上，水平方向有1920像素，垂直方向有1080像素。通過簡單地相乘，可以得出這塊屏幕約有200萬像素。

隨著屏幕制造工藝的改進(jìn)和科技的發(fā)展，電子設(shè)備的分辨率越來越高，呈現(xiàn)出的畫面越來越細(xì)膩，同時(shí)屏幕上的每個(gè)物理像素也變得越來越小。在同樣的6英寸屏幕上，部分手機(jī)屏幕只有200萬像素，但也有一些手機(jī)屏幕則會(huì)用到800萬像素甚至更多。

由于每個(gè)物理像素的規(guī)格不同，在界面設(shè)計(jì)時(shí)像素不再是一種合理的單位。例如若將一個(gè)按鈕的寬度設(shè)置為500像素，則在老式或低端的屏幕上或許能占5cm，但在高清屏幕上由于像素密度高，500像素可能只占不到2cm，因此，F(xiàn)lutter框架使用比較現(xiàn)代的“邏輯像素”概念，相當(dāng)于安卓原生開發(fā)里的displaypixel單位，或iOS原生開發(fā)里的CGPoint概念。運(yùn)行時(shí)，F(xiàn)lutter程序會(huì)根據(jù)當(dāng)前的設(shè)備信息自動(dòng)提供邏輯像素到物理像素的轉(zhuǎn)換，最終提供統(tǒng)一的“每38像素約為1cm”或“每英寸約96像素”的接口(2)。這樣開發(fā)者在處理頁面布局時(shí)，就不需要考慮不同設(shè)備屏幕的像素密度問題了。

同時(shí)這里值得一提的是，F(xiàn)lutterLogo組件默認(rèn)的尺寸24.0實(shí)際是由最近的上級(jí)IconTheme組件設(shè)置的，而IconTheme組件（圖標(biāo)主題）的主要作用就是設(shè)置各式Icon組件（圖標(biāo)）的默認(rèn)尺寸和風(fēng)格。本書將在第2章“文字與圖片”中詳細(xì)介紹這2個(gè)組件。

圖1-2　FlutterLogo的不同樣式

2．樣式

徽標(biāo)樣式可由style屬性設(shè)置，即是否需要在徽標(biāo)附近插入Flutter文字，以及文字的顯示位置。這里的默認(rèn)值是FlutterLogoStyle. markOnly，即只顯示徽標(biāo)，不顯示文字。其他可選值為FlutterLogoStyle. horizontal和FlutterLogoStyle. stacked，分別將文字顯示在徽標(biāo)的右邊和下邊。

這里需要注意的是，這個(gè)組件的外形是一條邊長由size屬性定義的正方形。為了將內(nèi)容保持在正方形的邊框內(nèi)，當(dāng)需要顯示Flutter字樣時(shí)，即使size參數(shù)不變，徽標(biāo)實(shí)際尺寸也會(huì)相應(yīng)縮小，具體效果如圖1-2所示。

3．其他不常用屬性

1）color和textColor

徽標(biāo)的顏色由color屬性設(shè)置，默認(rèn)為藍(lán)色。如果不方便使用藍(lán)色（例如App本身就是藍(lán)色背景等），推薦使用橙黃色、紅色或靛藍(lán)色。如果包括默認(rèn)藍(lán)色在內(nèi)的這4種顏色都不合適，則推薦使用粉紅色、紫色或者青色。這些是Flutter品牌使用的顏色(3)。

若前面通過style屬性選擇了需要顯示Flutter文字，則還可以再借助textColor屬性修改文字的顏色。在白色背景上，推薦使用顏色代碼為#616161的中性灰。

2）duration和curve

由于FlutterLogo組件內(nèi)置了隱式動(dòng)畫，當(dāng)size、style、color、textColor這些屬性值有變化時(shí)，該組件會(huì)自動(dòng)觸發(fā)漸變動(dòng)畫效果。這里duration屬性負(fù)責(zé)控制動(dòng)畫時(shí)長，默認(rèn)為750ms，而curve屬性負(fù)責(zé)動(dòng)畫曲線，默認(rèn)為線性，即默認(rèn)情況下該組件會(huì)在新值與舊值之間線性插入750ms的補(bǔ)幀動(dòng)畫效果。這里duration和curve屬于隱式動(dòng)畫組件的常用屬性，有興趣的讀者可參考第7章“過渡動(dòng)畫”中的相關(guān)內(nèi)容。