Flutter 中 stateless 和 stateful widget 的區別

介紹

要在 Flutter 中構建任何應用程序，我們必須創建一個小部件類，它是 Flutter 應用程序的構建塊。Flutter 使用小部件來創建現代移動應用程序。

Flutter 中的 Widget 分為兩類：無狀態 Widget 和有狀態 Widget。考慮到這一點，我們將研究 Flutter 中的無狀態和有狀態小部件，并解釋它們的區別。

讓我們從這個問題開始：Flutter 中一個小部件的狀態是什么？

小部件的狀態

狀態是在構建期間同步讀取小部件類的信息 - 也就是說，當小部件顯示在屏幕上并且如果信息在其生命周期內發生更改時可能會發生變化。

Flutter 內置了幾個小部件，它們都分為有狀態和無狀態小部件。

無狀態小部件

在 Flutter 應用程序運行期間，無狀態小部件無法更改其狀態。這意味著在應用程序運行時無法重繪無狀態小部件。出于這個原因，外觀和屬性在小部件的整個生命周期中保持不變。

當我們描述的 UI 部分不依賴于任何其他小部件時，無狀態小部件會很有用。無狀態小部件的示例是文本、圖標、圖標按鈕和凸起按鈕。

這是一個無狀態小部件的示例：

class StatelessScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('堅果前端'),backgroundColor: Colors.blueGrey[600],),backgroundColor: Colors.white,body: Container(),),);} }

我們可以看到，在代碼中，無狀態小部件的名稱是StatelessScreen并且它正在覆蓋該build方法。該build方法將BuildContext用作參數并返回一個小部件。

當我們創建不需要一次又一次重繪小部件的應用程序時，我們使用無狀態小部件。例如，當我們創建一個AppBar](，無狀態小部件可以是不需要更改的腳手架或圖標。

無狀態小部件類僅在初始化時調用一次。即使有外力作用在它上面，它也不會更新。

每當StatelessScreen小部件初始化時，build就會調用該方法。之后，小部件將打印在屏幕上。

但是如果我們希望它在有動作時更新，我們必須制作一個有狀態的小部件。

有狀態的小部件

當 UI 的某些部分必須在運行時動態更改時，使用有狀態小部件。有狀態的小部件可以在應用程序運行時多次重繪自己。

當我們描述的 UI 部分動態變化時，有狀態小部件很有用。如果我們創建一個按鈕小部件，每次用戶單擊該按鈕時都會更新自身，這就是一個有狀態小部件。

這是您可以使用有狀態小部件的方式：

class StatefulScreen extends StatefulWidget {@override_StatefulScreenState createState() => _StatefulScreenState(); } class _StatefulScreenState extends State<StatefulScreen> {String title = 'Original title';@overrideWidget build(BuildContext context) {return Column(children: [Text(title),RaisedButton(child: Text('Click'),onPressed: () {setState(() {title = 'Changed title';});})]);} }

我們創建了一個文本字段和一個按鈕小部件。

一旦我們調用這個小部件并按下按鈕，我們就會讓文本字段的值自動改變。

在這種類型的應用程序中，我們可以通過實現. 是一種在有狀態小部件類中調用的方法。每次調用時，此方法都會更改有狀態小部件的值。setState()``setState()

無狀態和有狀態的區別

回顧一下我們在上面的例子中所展示的內容，下表描述了無狀態和有狀態小部件之間的區別：

無狀態小部件有狀態的小部件

僅在初始化時更新	動態變化
文本、圖標和 RaisedButtons	復選框、單選按鈕和sliders
沒有. 它將被渲染一次并且不會自行更新setState()	有一個內部并且可以在輸入數據更改時重新渲染setState()
靜態小部件	動態小部件
除非發生外部事件，否則無法在運行時更新	可以在運行時根據用戶操作或數據更改進行更新

請注意，對于要創建的兩個小部件，它們都需要BuildContext作為返回小部件的參數。

結論

我們已經介紹了有狀態和無狀態小部件之間的差異，以幫助您構建更好的 Flutter 應用程序。從示例中，我們了解了無狀態和有狀態小部件的作用以及如何知道您的用例需要哪個類。

現在，您可以使用針對不同用例的小部件創建更好的 UI。

總結

以上是生活随笔為你收集整理的Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。