Flutter:Stateful, Stateless, Key, Context   2019-10-31


Key

在理解key之前,我們要先釐清stateless與stateful的差異性。

stateless is Dataless
意味不使用任何資料,例如圖示、文字

在app運作過程中,不能被更換state,只能build一次,也就是說當app在運行時,stateless無法重新繪製,除非又被初始化一次。
常用元件例如:Icon、Chip、Text。
https://youtu.be/t2W_QYq2gqY

stateful is Dataful
意味Widget有著資料,例如這篇文章被按多少次讚(需要計算資料數),標題字串更改(更改資料)。

可以在app運行時隨時重新繪製無數次。
https://youtu.be/Agss0J3NmS0

這部影片展示stateless與stateful實例,可以看到stateless必須hot reload才會更新畫面widget。
https://youtu.be/njfj24njaVI

key將會用於保留元件狀態,例如滾動後的位置。
key並不會運用於stateless,而是在stateful。
假設兩個畫面有兩個狀態拉桿,而使用者想要在其中一個頁面的拉桿設為1時,另一個頁面中的拉桿也同時設為1,此時使用GlobalKey。
Key類型介紹看下面影片:
https://youtu.be/kn0EOS-ZiIc?t=413

Context

context類似標籤,一個widget有一個context,並且代表著該widget在widget tree中的位置。
state與context是緊扣在一起的,且是永久關係,state不會去改變context。

Source:https://segmentfault.com/a/1190000018863761

目錄

  1. Key
  2. Context