flutter初體驗之基礎控件知識

在naive開發中，你們對view確定很熟悉，它表明着全部控件的祖先。在flutter中，也存在這麼一個全部控件的祖先---Widget。Widget類是一個抽象類，定義在系統的framework.dart中，咱們能夠看下它的實現類很是多，好幾百個都不止。其實，Flutter中的Widget概念更普遍，它不只能夠表示UI元素，也能夠表示一些功能性的組件如：用於手勢檢測的 GestureDetector、用於應用主題數據傳遞的Theme等等。

Widght子類介紹

學習一個新UI技術，咱們確定首先會學習文本控件，因此咱們首先打開flutter中的最簡單的文本控件---Text來看下。Text控件首先繼承自StatelessWidget，而後StatelessWidget又繼承自Widget，也就是說Text是間接繼承自Widget，其餘的好比圖片控件什麼的也是同樣，這裏就不一一貼圖了。

那麼是否全部控件都是繼承自StatelessWidget呢？答案是否認的，好比Checkbox是繼承自StatefulWidget，而後StatefulWidget繼承自Widget。

既然有些控件是繼承自StatelessWidget，又有些控件是繼承自StatefulWidget，那麼這兩者的區別是什麼呢？StatelessWidget是用於不須要維護狀態的場景，在構建過程當中會遞歸的構建其嵌套的Widget。StatefulWidget是動態的，添加了一個新的接口'createState()'用於建立和Stateful widget相關的狀態'State'，它在Stateful widget的生命週期中可能會被屢次調用。

簡單項目構造

接下來咱們來看看最簡單的flutter界面類是什麼樣的。基本的界面也可使用StatelessWidget方式構造和StatefulWidget方式構造，區別也是需不須要維護狀態。

StatelessWidget方式

系統默認的方式就是繼承自StatelessWidget的方式，複寫其中的build方法進行控件的填充。這裏將具體頁面內容封裝到了MyHomePage類中，也是爲了防止build方法層級太亂。

StatefulWidget方式

StatefulWidget方式和StatelessWidget區別在於，StatefulWidget擁有修改狀態的createState方法。本例中，咱們首先在state中定義了一個字符串，而後再build中將該字符串設置到了界面上，而後在state中開了延時一秒，而後執行更新字符串的操做，最後界面上一秒後字符串就自動更新成新字符串了，這種方式是否是比java中找到控件，而後去賦值的方式要簡單很多呢？這裏須要注意的是，不能在State的構造方法裏直接調用狀態數據的修改，這樣是不會起做用的，由於此時系統還沒執行到build方法，因此界面還沒顯示出來，何來的修改？

State生命週期

上面說到state修改時會涉及到界面的生命週期問題，那麼state完整的生命週期是什麼樣的呢？想知道這個答案，咱們就必須對State裏面的回調方法進行打點。那麼有哪些方法呢，打開State類的構造視圖來看下，將其中的方法進行復寫，而後查看調用順序便可。

打好的輸出點結果以下圖：

從結果能夠看到，首先執行initState方法，而後是didChangeDependencies，而後是build，而後是setState，而後又執行了一次build。這裏其實執行到build之後界面就已經顯示出來了，後面執行setState後因爲咱們有一次修改字符串內容的操做，因此致使頁面發生了重繪，結果是再次執行了build方法。因而咱們能夠畫出生命週期流程圖大體以下：

State生命週期方法簡單介紹：

initState：當Widget第一次插入到Widget樹時會被調用，對於每個State對象，Flutter framework只會調用一次該回調。

didChangeDependencies：初始化時，在initState()以後馬上調用，另外，當依賴的InheritedWidget rebuild,會觸發此接口被調用。

build：繪製界面，當setState觸發的時候會再次被調用。

didUpdateWidget：狀態改變的時候會調用該方法,好比調用了setState。

deactivate：當State對象從樹中被移除時，會調用此回調。

dispose：當State對象從樹中被永久移除時調用；一般在此回調中釋放資源。

基本控件介紹

一、Text

'Text'是展現單一格式的文本Widget(相似於Android的'TextView')。前面舉例子也用過Text，它至關因而一個純文本的展現。

設置字體大小、顏色等基本功能固然是支持的，flutter中Text的構造方法中提供了一組可選命名參數，裏面就包括了這些基本設置屬性。

修改字體等這些基本屬性只須要用到上面那麼多可選參數中的style便可，因而咱們能夠用dart中可選命名參數A:b的方式進行賦值，以下：

2.RichText

若是須要顯示更爲豐富樣式的文本(好比一段文本中文字不一樣顏色),可使用'RichText'或者'Text.rich'，以下例中咱們定義了一段不一樣顏色的文字內容。

3.DefaultTextStyle

在widget樹中，文本的樣式默認是能夠被繼承的，所以，若是在widget樹的某一個節點處設置一個默認的文本樣式，那麼該節點的子樹中全部文本都會默認使用這個樣式。至關於Android中定義的Theme。

4.FlutterLogo

這個Widget用於顯示Flutter的logo。。。

5.Icon

主要用於顯示內置圖標

6.Image

顯示圖片的`Widget`。圖片經常使用的格式主要有bmp,jpg,png,gif,webp等，Android中並非天生支持gif和webp動圖，可是這一特性在flutter中被很好的支持了

7.Iamge.asset

在工程目錄下建立目錄，如：assets，將圖片放入此目錄，接下來打開根目錄的pubspec.yaml配置文件進行配置，然後就可使用了。

8.Image.file

在sd卡中放入一張圖片。而後利用**path_provider**庫獲取sd卡根目錄(Dart庫版本能夠在：https://pub.dartlang.org/packages查詢)。

9.Image.network

從網絡上直接顯示圖片，因此給出網絡地址便可。

> Flutter 1.0，加載https時候常常出現證書錯誤。必須斷開AS打開app

10.Image.memory

從byte數組中獲取數據並顯示

這裏介紹一下圖片的大小處理，相似於android中的imageview的scaleType屬性。

BoxFit.fill：填充，忽略原有的寬高比，填滿爲止

BoxFit.contain：包含，不改變原有比例讓容器包含整個圖片，容器多餘部分填充背景

BoxFit.cover ：覆蓋，不改變原有比例，讓圖片充滿整個容器，圖片多餘部分裁剪

BoxFit.fitWidth：橫向圖片填充

BoxFit.fitHeight：縱向圖片填充

BoxFit.none：原始大小居中

BoxFit.scaleDown：圖片大小小於容器事至關於none，圖片大小大於容器時縮小圖片大小實現contain

11.CircleAvatar

主要用來顯示用戶的頭像，任何圖片都會被剪切爲圓形。

12.FadeInImage

當使用默認'Image'顯示圖片時，您可能會注意到它們在加載完成後會直接顯示到屏幕上。這可能會讓用戶產生視覺突兀。若是最初顯示一個佔位符，而後在圖像加載完顯示時淡入，咱們可使用'FadeInImage'來達到這個目的！

image = FadeInImage.memoryNetwork(
       placeholder: kTransparentImage,
       image: 'https://flutter.io/images/homepage/header-illustration.png',
);

13.按鈕

Material widget庫中提供了多種按鈕Widget如RaisedButton、FlatButton、OutlineButton等，它們都是直接或間接對RawMaterialButton的包裝定製，因此他們大多數屬性都和`RawMaterialButton`同樣。全部Material 庫中的按鈕都有以下相同點：
1. 按下時都會有「水波動畫」。
2. 有一個`onPressed`屬性來設置點擊回調，當按鈕按下時會執行該回調，若是不提供該回調則按鈕會處於禁用狀態，禁用狀態不響應用戶點擊。

14.RaisedButton

"漂浮"按鈕，它默認帶有陰影和灰色背景

RaisedButton(
     child: Text("normal"),
     onPressed: () => {},
)

15.FlatButton

扁平按鈕，默認背景透明並不帶陰影

FlatButton(
     child: Text("normal"),
     onPressed: () => {},
)

16.OutlineButton

默認有一個邊框，不帶陰影且背景透明。

OutlineButton(
     child: Text("normal"),
     onPressed: () => {},
)

17.IconButton

可點擊的Icon

IconButton(
     icon: Icon(Icons.thumb_up),
     onPressed: () => {},
)

18.輸入框

獲取控件焦點

 FocusNode: 與Widget綁定，表明了這個Widget的焦點

​ FocusScope: 焦點控制範圍

​ FocusScopeNode：控制焦點

獲取控件的輸入內容

獲取輸入內容有兩種方式：

1. 定義兩個變量，用於保存用戶名和密碼，而後在onChange觸發時，各自保存一下輸入內容。
2. 經過controller直接獲取。

TextFormField

`TextFormField`比普通輸入框`TextField`多了一些屬性，其中 ***validator***用於設置驗證回調。在單獨使用時與`TextField`沒有太大的區別。當結合`From`，利用`From`能夠對輸入框進行分組，而後進行一些統一操做(驗證)

總結：打好基礎，才能建起高樓大廈。本次主要是分享了一下flutter入門的一些基礎知識，包括系統簡單控件相關知識、state生命週期相關知識，這些知識點都將是學好flutter必須掌握的一塊敲門磚。有關控件種類實在太多，只能等項目中實戰再慢慢去使用了，但願有了這個文章之後到時候能下降這些控件的使用難度，提高本身的開發速度。