iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Mobile Development

Flutter - 複製貼上到開發套件之旅系列 第 1

【第一天 - Flutter 生命週期+基本觀念介紹】

什麼是 StatefulWidget?

StateFulWidget 的生命週期

  1. createState()
  • 當你創建一個 statefulWidget 的時候,會看到一個 createState(),這邊他就是開始建立狀態。
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  1. mounted is true
  • 底層的 flutter 會將 mounted 設定為 true,這代表他已經將 state 分配給你的子元件了。
  • 你可以在 mounted == true 的情況下使用 setState() 來更新畫面。因為這個參數是用來確保 State 存在 setState(),也就是說,在 mounted == true 的情況才可以使用 setState()
  1. initState()
  • 只會調用一次,初始化,並要求要有 super.initState()
  • 這邊可以用來初始化一些參數、controlle 的 listener、stream.listen() 等等..
  @override
 void initState() {
   super.initState();
   // TODO
 }
  1. didChangeDependencies()
  • 子元件依賴於更新的 InheritedWidget 會被調用。
  • 注意:initState 的 function 不一定會在全部執行完成才會觸發這個方法,有的時候 didChangeDependencies 被觸發時, initState() 裡面的方法還未全部執行完成。
  1. build()
  • 畫面 UI
  • 必須回傳一個 Widget

6.didUpdateWidget(Widget oldWidget)

  • 只要在父元件中调用 setState(),子元件的的 didUpdateWidget() 就一定會被觸發,不管父元件傳遞給子元件的建構子參數有沒有變化。
  1. setState()
  • 它用於通知 Framework 數據已更改,此時 build() 裡面的 context 會重新建構元件 。
  • 便宜,不吃效能。因為他裡面不能使用 async 的方法。
  1. deactivate()
  • 當頁面切換時,會觸發,此時 State 在視圖樹中的位置發生了變化,需要先暫時移除後添加。
  1. destory()
  • 將資源釋放。而在呼叫這個方法之前,會先呼叫 deactivate()
  1. mounted is false
  • 底層的 flutter 會將 mounted 設定為 false,這代表他已經將 state 從子元件裡面移開了。
  • mounted == false 的情況下使用 setState() 會噴 ERROR。

什麼是 StatelessWidget?

Flutter 的 Widget 寫法有兩種

第一種 - 使用 function 當作 Widget

Widget myWidget(){
    return Text('title');
} 

第二種 - 使用 class 當作 Widget

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('title');
  }
}

差異

https://ithelp.ithome.com.tw/upload/images/20210904/20134548nHR3U0F2yS.png
由此圖可知,如果寫成 class 可以透過 flutter inspector 看到自己的 class 名稱(MyWidget),如果是使用 function 的方式的話,只會看到Text

怎麼選擇?

就看你的習慣是什麼了~只要好閱讀,都是好方法。


下一篇
【第二天 - Flutter 繼承+建構子+CallBack 基本概念】
系列文
Flutter - 複製貼上到開發套件之旅30

尚未有邦友留言

立即登入留言