Flutter

Flutter 跨平台開發架構-專案說明

張阿鬼 2020/12/30 18:44:47
1400

建立一個新的Flutter專案後,預設會幫我們建立一個簡單的APP,
以及整個專案的結構。

以下就針對幾個比較重要的地方做簡單的說明

android目錄

android目錄中主要會對AndroidManifest.xml這個檔案做操作,
通常是用在設定會使用到的權限(網路、相機等),Android版本
或者設定icon、應用程式名稱等。

iOS目錄

在iOS目錄中,同樣也是可設定icon,應用程式名稱,
編譯版本等。

lib目錄
放置Flutter程式碼,基本上主要都是在這個目錄下開發。

接著就看到main.dart這支程式碼中,
會看到以下程式

void main() {
  runApp(MyApp());
}

這個部分就是應用程式的進入點,
runApp這個方法會將MyApp這個Widget充滿整個畫面,
在Flutter中大至整個畫面小至控制項所有的東西都是Widget堆疊而成。
而Widget主要又分為兩大類型StatelessWidget與StatefulWidget。
StatelessWidget為沒有狀態的Widget,他是不需要管理狀態的Widget。
StatefulWidget為可變狀態的Widget,會使用setState方法通知框架某個狀態發生改變,
然後重新執行build方法。

回到程式碼的地方,看到MyApp這個Class,他繼承了StatelessWidget,
程式碼一開始會執行build這個方法,在裡面回傳了MaterialApp這個類型。

MaterialApp有三個參數,
title在畫面上是無法看到的
theme表示介面風格,可以試著將原本的blue換成別的顏色,
在Flutter開發中的修改是hotload的,所以只要修改後存檔就會立刻更新到畫面上

home表示APP的首頁,型別為widget類型。範例中傳入了MyHomePage這個類別。

接著看到MyHomePage,它是繼承了StatefulWidget,代表它有需要改變狀態的地方。


在該類別內會看到createState這個方法,裡面又建立了_MyHomePageState這個類別,
該頁面就是透過此類別控制狀態。


 

看到_MyHomePageState這個類別中,會先執行bulid這個方法,
當狀態有任何更新時,就會重新呼叫bulid重新渲染這個Widget畫面。
在bulid中會傳了Scaffold這個類型,該類型包含了常用的appBar、NavigationBar等,
方便開發者快速建立使用者介面。


往下看到floatingActionButton的部分,就是畫面右上方那個+號按鈕

當按下該按鈕的時候,會叫用setState這個方法,
並將記錄按了幾下的int變數增加1,
前面提到了呼叫setState後會重新執行build方法渲染畫面,
而畫面中的Text顯示的值就是該變數,
因此就會更新按了幾下的值到畫面上


至此我們已經大致了解了基本Flutter的運作,
以及Widget的區別和畫面更新的方式。
利用各種的Widget組合堆疊,就可以開發出各式的APP囉。

張阿鬼