【基本】StatelessWidget和StatefulWidget的使用方法!

這次我們將介紹Flutter中畫面基本的構成元素,
StatelessWidgetStatefulWidget的概要和使用方法。

StatelessWidget和StatefulWidget

首先,StatelessWidget和StatefulWidget中的Widget(小部件)是指,
用於表示畫面、按鈕、文本框等在畫面上呈現的客戶端類別。

Flutter通過Widget來表達應用的功能和設計。

在Widget中,
 不保持狀態的Widget → StatelessWidget,
 保持狀態的Widget → StatefulWidget
可以這樣區分。

保持狀態是什麼意思?

在應用中,存在始終顯示不會變化的元素
以及用戶操作後顯示會變化的元素

始終顯示不會變化的元素
・標題欄
・圖標
・不可編輯的文本框等
→這些元素一旦繪製後不會再變化

顯示會變化的元素
・計數器顯示
・登錄狀態
・可編輯的文本框等
→這些元素在內容變化時會重新繪製

StatelessWidget的代碼

以下是StatelessWidget的代碼。
這是一個在應用中心顯示指定文本框的畫面。

中心的文本框不會變化,因此不會重新繪製。

StatefulWidget的代碼

以下是StatefulWidget的代碼。
在應用中心有一個計數器,點擊應用畫面上的按鈕時,
計數器會加1。

這個計數器在按鈕被點擊時內容會動態變化。
這就是「持有狀態」的意思。

另外,Widget所持有的狀態稱為State

關於StatefulWidget

看上面的StatefulWidget代碼可以看到MyApp類和_MyAppState類構成。

MyApp類
 這個類是StatefulWidget。
 MyApp類調用了_MyAppState類。

_MyAppState類
 這個類被MyApp類調用。
 設計了主要的計數器畫面,並管理計數器的State。 

實際上重新繪製的只有_MyAppState類(State),
而MyApp類(StatefulWidget)在定義後不會變化。

MyApp類負責靜態畫面的設計和設置,
實際進行動態重新繪製的是_MyAppState類。

關於狀態管理

這次介紹了一個狀態的變化,但實際上在製作應用時,
需要在多個畫面上表現各種狀態信息。

然而,在StatefulWidget中,管理多個畫面使用的全局狀態
存在困難的問題。

因此,能簡單管理全局狀態的”Riverpod”經常被使用!
關於Riverpod,請參考以下文章。

最後

在應用中,幾乎必須的狀態管理,
由於它是客戶端部分的概念,初學者可能會有點難理解。

希望這篇文章能對理解有所幫助。
感謝您讀到最後!!

标题和URL已复制