前兩篇分享了 Kotlin & Flutter 各自的基礎元件應用實例，實例結果都是如下畫出同個畫面：
| Kotlin 基礎元件應用實例結果截圖 | Flutter 基礎元件應用實例結果截圖 |
|---|---|
 |
 |
今天就來統整一下開發時的思路差異吧!!
統整出一眼就看得懂的 Kotlin & Flutter 基礎元件開發比較表格
(減輕 Kotlin 和 Flutter App 開發轉換的痛苦程度XD)
| Kotlin | Flutter | |
|---|---|---|
| 匯入圖片 | 新增圖片到預設的 res/drawable 資料夾下 |
匯入圖片到自己建的資料夾後，必須在 pubspec.yaml 內宣告圖片路徑(Flutter 才知道圖在哪) |
| 建立元件方式 | 先去 xml 畫設計圖，再去 Activity 監控元件行為 |
在 main.dart 建立元件設計圖且一併監控元件行為，最後 在 build() return 元件最終畫面 |
| 設定元件的 排列方向 | 由 xml 的 ConstraintLayout 設定 |
垂直排列用 Column 元件，橫向排列用 Row 元件 |
| 設定元件的對齊方式 | 透過 xml 元件 ConstraintLayout 屬性設定 |
透過 Container 元件 和 Column 元件 中 alignment 參數設定 |
| 設定元件的 padding | 透過 xml 元件屬性設定 |
透過 Container 元件 padding 參數設定 |
| 元件生命週期 | 隨著 Activity 生命週期 |
每次 setState((){}); 元件都會生成新元件 |
| 元件監聽和處理點擊事件的方式 | 在元件加上 onClickListener，於 Listener 裡處理事件觸發後的執行程序 |
由 InkWell 元件的 onTap 參數傳入事件觸發後的執行程序 |
| 改變元件狀態方法 | 因點擊事件改變資料狀態，由 observer 觀察者觀察到了資料變化後，會自動更新元件狀態 |
因點擊事件改變資料狀態後，由 setState((){}); 以變數新資料狀態建立新元件 |
iThome鐵人賽
看影片追技術