Flutter 中 stateless 和 stateful widget 的區(qū)別

介紹

要在 Flutter 中構(gòu)建任何應(yīng)用程序，我們必須創(chuàng)建一個(gè)小部件類，它是 Flutter 應(yīng)用程序的構(gòu)建塊。Flutter 使用小部件來創(chuàng)建現(xiàn)代移動(dòng)應(yīng)用程序。

Flutter 中的 Widget 分為兩類：無狀態(tài) Widget 和有狀態(tài) Widget。考慮到這一點(diǎn)，我們將研究 Flutter 中的無狀態(tài)和有狀態(tài)小部件，并解釋它們的區(qū)別。

讓我們從這個(gè)問題開始：Flutter 中一個(gè)小部件的狀態(tài)是什么？

小部件的狀態(tài)

狀態(tài)是在構(gòu)建期間同步讀取小部件類的信息 - 也就是說，當(dāng)小部件顯示在屏幕上并且如果信息在其生命周期內(nèi)發(fā)生更改時(shí)可能會(huì)發(fā)生變化。

Flutter 內(nèi)置了幾個(gè)小部件，它們都分為有狀態(tài)和無狀態(tài)小部件。

無狀態(tài)小部件

在 Flutter 應(yīng)用程序運(yùn)行期間，無狀態(tài)小部件無法更改其狀態(tài)。這意味著在應(yīng)用程序運(yùn)行時(shí)無法重繪無狀態(tài)小部件。出于這個(gè)原因，外觀和屬性在小部件的整個(gè)生命周期中保持不變。

當(dāng)我們描述的 UI 部分不依賴于任何其他小部件時(shí)，無狀態(tài)小部件會(huì)很有用。無狀態(tài)小部件的示例是文本、圖標(biāo)、圖標(biāo)按鈕和凸起按鈕。

這是一個(gè)無狀態(tài)小部件的示例：

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

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

當(dāng)我們創(chuàng)建不需要一次又一次重繪小部件的應(yīng)用程序時(shí)，我們使用無狀態(tài)小部件。例如，當(dāng)我們創(chuàng)建一個(gè)AppBar](，無狀態(tài)小部件可以是不需要更改的腳手架或圖標(biāo)。

無狀態(tài)小部件類僅在初始化時(shí)調(diào)用一次。即使有外力作用在它上面，它也不會(huì)更新。

每當(dāng)StatelessScreen小部件初始化時(shí)，build就會(huì)調(diào)用該方法。之后，小部件將打印在屏幕上。

但是如果我們希望它在有動(dòng)作時(shí)更新，我們必須制作一個(gè)有狀態(tài)的小部件。

有狀態(tài)的小部件

當(dāng) UI 的某些部分必須在運(yùn)行時(shí)動(dòng)態(tài)更改時(shí)，使用有狀態(tài)小部件。有狀態(tài)的小部件可以在應(yīng)用程序運(yùn)行時(shí)多次重繪自己。

當(dāng)我們描述的 UI 部分動(dòng)態(tài)變化時(shí)，有狀態(tài)小部件很有用。如果我們創(chuàng)建一個(gè)按鈕小部件，每次用戶單擊該按鈕時(shí)都會(huì)更新自身，這就是一個(gè)有狀態(tài)小部件。

這是您可以使用有狀態(tài)小部件的方式：

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';});})]);} }

我們創(chuàng)建了一個(gè)文本字段和一個(gè)按鈕小部件。

一旦我們調(diào)用這個(gè)小部件并按下按鈕，我們就會(huì)讓文本字段的值自動(dòng)改變。

在這種類型的應(yīng)用程序中，我們可以通過實(shí)現(xiàn). 是一種在有狀態(tài)小部件類中調(diào)用的方法。每次調(diào)用時(shí)，此方法都會(huì)更改有狀態(tài)小部件的值。setState()``setState()

無狀態(tài)和有狀態(tài)的區(qū)別

回顧一下我們?cè)谏厦娴睦又兴故镜膬?nèi)容，下表描述了無狀態(tài)和有狀態(tài)小部件之間的區(qū)別：

無狀態(tài)小部件有狀態(tài)的小部件

僅在初始化時(shí)更新	動(dòng)態(tài)變化
文本、圖標(biāo)和 RaisedButtons	復(fù)選框、單選按鈕和sliders
沒有. 它將被渲染一次并且不會(huì)自行更新setState()	有一個(gè)內(nèi)部并且可以在輸入數(shù)據(jù)更改時(shí)重新渲染setState()
靜態(tài)小部件	動(dòng)態(tài)小部件
除非發(fā)生外部事件，否則無法在運(yùn)行時(shí)更新	可以在運(yùn)行時(shí)根據(jù)用戶操作或數(shù)據(jù)更改進(jìn)行更新

請(qǐng)注意，對(duì)于要?jiǎng)?chuàng)建的兩個(gè)小部件，它們都需要BuildContext作為返回小部件的參數(shù)。

結(jié)論

我們已經(jīng)介紹了有狀態(tài)和無狀態(tài)小部件之間的差異，以幫助您構(gòu)建更好的 Flutter 應(yīng)用程序。從示例中，我們了解了無狀態(tài)和有狀態(tài)小部件的作用以及如何知道您的用例需要哪個(gè)類。

現(xiàn)在，您可以使用針對(duì)不同用例的小部件創(chuàng)建更好的 UI。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。