【Flutter 1-19】Flutter手把手教程UI布局和Widget——Statelesswidget與Statefulwidget

Statelesswidget

如果一個Widget從初始化到使用再到銷毀，整個過程中都不需要修改其UI的樣式，例如純展示頁面，我們就用Statelesswidget。常見的Statelesswidget有：Text、Icon、ImageIcon、Dialog等。可以看到這些往往都是一些展示類的，不需要改變其狀态的控件。

使用Statelesswidget更輕量，更節省記憶體資源。初始化Statelesswidget的時候不會附帶一些動态更新UI的方法，這樣也會提升我們軟體的性能。

需要注意的是： 在iOS開發中，初始化一個Label并命名為la，改變它的文字内容，會調用la.text = @"new text"，我們可以了解為Label不是Statelesswidget的，因為它的text屬性被改變了。那Flutter的Text為什麼又是Statelesswidget的呢？因為Flutter中一切Widget都是 “配置檔案”，當我們修改文本之後，Flutter會幫助我們重新初始化一個Text，而不是修改目前的Text對象，這是與原生開發不一樣的地方。

Statefulwidget是可變的Widget，在我們的開發中會大量使用Statefulwidget。它實作了一個setState方法，當我們調用這個方法的時候，該Statefulwidget會被重新渲染，注意是重新被渲染，而不是局部更新。

當我們調用setState時，Flutter在收到該消息後，會重新調用其build方法重新建構這個widget，進而達到更新UI的目的。

來看如下代碼：

我們定義了一個生成随機顔色的方法_randomColor()，它會傳回一個Color對象，然後我們又定義了一個Container，Container的初始化參數color的值是_randomColor()的傳回值。然後我們在FloatingActionButton的onPressed的方法中調用一下setState方法，這個時候Flutter會重新繪制StatefulWidgetDemoPage，是以每次點選按鈕，我們可以看到Container的顔色都是不一樣的。

在Flutter中我們看到的UI元素都是由Widget生成的，包括手勢，在Flutter中也是Widget。Widget并不是我們看到的UI元素，我們實際看到的UI元素叫Element，Widget是Element的配置資料。

我們寫了大量的Widget經Flutter處理渲染生成了Element來展示在手機螢幕上。是以當我們調用setState方法的時候，我們隻是更新了配置資料，Flutter依照更新後的配置資料來生成新的Element來達到渲染UI的目的。

注意 一個 Widget可以對應多個Elememt對象，這等同與一個配置檔案可以生成多個執行個體對象一樣。

想體驗以上的示例的運作效果，可以到我的Github倉庫項目flutter_app->lib->routes->statefulwidget_page.dart檢視，并且可以下載下傳下來運作并體驗。