iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0
Mobile Development

畢業專題拯救計畫系列 第 3

Flutter中的小小積木--widget 基本概念2

  • 分享至 

  • xImage
  •  

昨天我們介紹完了常見的widget,今天我們要來介紹同樣非常重要及常見的兩個widget,分別是StatelessWidget和StatefulWidget。

  • 同樣是widget,有什麼不同呢?

昨天介紹的是偏向具體的widget,用來實現具體功能,很容易看的出來。而StatelessWidget和StatefulWidget是 Flutter 中抽象的widget,它們提供了創建和管理 UI 的基本框架,而所有的 widget(包括 Text、Row 等)都是這兩個widget 的子類之一。

StatelessWidget

StatelessWidget 是無狀態的 widget,它的狀態不會被改變,只包含不可變的數據和資料。適用於顯示靜態內容。例如標題、圖示、靜態圖片等。

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('This is a stateless widget');
  }
}

StatefulWidget

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就像電子螢幕,你可以隨著時間或操作來改變螢幕上顯示的內容,同時也會因為不同操作導致不一樣的結果。

我們明天見~


上一篇
Flutter中的小小積木--widget 基本概念1
下一篇
Flutter中的櫃子--layout基本概念1
系列文
畢業專題拯救計畫7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言