討論範圍

統整 Kotlin & Flutter 建立元件與改變元件狀態方式比較。

比較方式

設定相同元件與相同元件狀態改變流程，以討論在寫兩種語言時的思考過程差異。

背景設定

1. 元件示意圖：幫一張照片附上愛心按鈕，愛心按鈕讓使用者可以點讚。
   

2. 元件狀態改變流程：愛心按鈕讓使用者可以點讚，點讚後會變紅色，沒有點讚會是白色的。

元件改變狀態前	元件改變狀態後

在寫 Kotlin 的時候在想啥?

1. 建頁面：建立個 Activity 或 Fragment。
2. 去找對應的 xml 設定樣式排 UI，然後設元件 id 。
3. 回到 Activity 或 Fragment ，透過元件 id 抓到元件。
   以下內容都在 Activity 或 Fragment 內處理 :
   3.1. 設定元件的圖片來源，在愛心按鈕加上監聽，並監聽愛心按鈕什麼時候被使用者點選到。
   3.2. 在愛心按鈕的監聽裡加判斷：當每次接收到觸發事件時，原本愛心是白色就轉成紅色，原本是紅色就轉成白色。
   3.3. 用變數接愛心顏色，愛心變顏色時，只要變數改變就再執行一次設定愛心顏色的函式。

在寫 Flutter 的時候在想啥?

1. 因為會改變狀態，用 Statefulwidget 元件宣告頁面。
   以下內容都在 Statefulwidget 元件內處理 :
   1.1. 根據 UI，在 build()裡 return 對應元件並排版，不用抓元件 id。
   1.2. 設定元件的圖片來源，在設定愛心按鈕元件 UI 時，要包上可監聽觸發事件的元件。
   1.3. 發生觸發事件後所需執行函數直接作為參數，傳入可監聽觸發事件的元件。
   1.4. 在發生觸發事件後所需執行函數裡判斷：當每次接收到觸發事件時，原本愛心是白色就轉成紅色，原本是紅色就轉成白色。
   1.5. 用變數接愛心顏色，愛心變顏色時，也就是變數資料改變後，用改變後的變數內容再執行 setState((){}); 重新生成新的元件。

用這兩種語言寫 App 的思考邏輯真的長得不太一樣XD
希望透過以上思考步驟在開發中 Kotlin & Flutter 切換自如~~~