昨天我們介紹完了常見的widget,今天我們要來介紹同樣非常重要及常見的兩個widget,分別是StatelessWidget和StatefulWidget。
昨天介紹的是偏向具體的widget,用來實現具體功能,很容易看的出來。而StatelessWidget和StatefulWidget是 Flutter 中抽象的widget,它們提供了創建和管理 UI 的基本框架,而所有的 widget(包括 Text、Row 等)都是這兩個widget 的子類之一。
StatelessWidget 是無狀態的 widget,它的狀態不會被改變,只包含不可變的數據和資料。適用於顯示靜態內容。例如標題、圖示、靜態圖片等。
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('This is a stateless widget');
}
}
StatefulWidget 是有狀態的 widget,而它的狀態可以被改變。它使用一個 State 來保存他的狀態。例如表單輸入、計數器、動畫、需要動態更新的列表等。
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Counter: $_counter'),
ElevatedButton(onPressed: _incrementCounter, child: Text('Increment')),
],
);
}
}
以簡單的例子來說,StatelessWidget就像一本書。這本書一旦印刷完成,他的內容就不會再改變。無論你怎麼翻閱,它的內容始終如一,不會根據用戶的操作或其他因素改變內容。
而StatefulWidget就像電子螢幕,你可以隨著時間或操作來改變螢幕上顯示的內容,同時也會因為不同操作導致不一樣的結果。
我們明天見~