本文為Flutter應用開發的第一篇文章，我們将通過幾個Flutter實例來演示下Flutter平台下界面開發的一個重要概念：一切皆為組件。本文将在Windows 11操作系統下使用Android Studio進行Flutter應用的開發，我們首先通過菜單File|New Flutter Project...命令創建一個Flutter應用程序，工程創建完成之後，我們将工程lib目錄下中的文件内容隻保留導入語句和一個空的main函數，如下圖1所示，

圖1

Flutter應用程序本身也是一個Dart應用程序，我們從Dart語言中學習到的内容依舊可以應用到Flutter應用開發中，Flutter應用與Dart應用的程序執行入口都是main函數，如圖1所示，我們通過執行Dart語言中的print函數，打印文本内容“Hello Dart”，其代碼如圖2所示。

圖2

等一下！print函數在Dart控制台應用程序中會将其參數内容輸出到屏幕上，現在這個print将内容輸出到哪裡呢？我們打開Logcat窗口，如下圖3所示，高亮的一行内容就是通過print函數調用時的輸出結果，這一行的最右側内容便是調用圖2中第4行代碼的輸出結果。當然，這一行的輸出内容還包含了當前應用的名稱和日期時間信息。

圖3

通過這個實例，我們驗證了Flutter程序其實與Dart程序相同，都采用了main函數作為程序執行入口，同樣Dart語言中的函數在Flutter應用中也是可以正常使用的，在進行Flutter應用開發過程中會經常使用Dart語言提供的一些功能或開發庫。

本文中的Flutter應用開發是一個移動端應用程序，針對移動端進行開發和使用Dart做桌面應用開發還是有所區别的，移動端開發很重要的一項任務就是編寫界面，而這正是Flutter平台所擅長的。在Flutter平台應用開發中，有一個概念：一切皆為組件。比如我們要顯示一些信息至設備的屏幕上，也就是使用組件進行顯示。

我們介紹的第一個組件名稱為Container，它表示一個容器，可以存放其它組件的容器，它是有大小和顔色屬性的，下面我們創建一個寬度為400，高度為300的Container對象，并将它的顔色設置為紅色

圖4

圖4中我們使用Container的構造函數創建了一個Container對象，通過設置width參數為400，height參數為300，color參數為Colors.red值，這樣我們就創建了一個400x300大小的矩形區域，我們運行程序看一下效果。

圖5

很是奇怪！整個屏幕的顔色全部變成了紅色，而不是400x300大小的區域為紅色，問題出現在哪裡呢？注意圖4中的runApp函數，它的作用是将其參數組件構建出來并顯示至屏幕上，但是它還做了另一項工作就是為這個參數組件添加全屏約束，使其作為根組件布滿整個屏幕。也就是說，不管你指定的根組件參數（width和height）是什麼，根組件的寬度永遠為屏幕的寬度，根組件的高度也一定與屏幕的高度相同。

如何添加一個指定大小的Container對象呢？我們隻要不将Container對象設置為根組件就可以了，也就是說不要作為runApp的參數，我們就可以顯示指定大小的Container對象。我們再在根組件Container對象中設置一個child參數，如圖6所示。

圖6

圖6中第9-12行代碼通過使用child參數來指定根組件的一個子組件（它同樣也是一個Container對象），通過将子組件的寬度和高度都設置為200，将顔色值設置為藍色，我們又創建了一個Container對象，缺省情況下，一個嵌套Container對象在其父Container對象中将會布滿整個父容器，通過圖6中第8行代碼，設置alignment屬性為居中顯示，那麼，子Container對象就可以正常的顯示，如下圖7所示。

圖7

通過上述的兩個Container對象的處理邏輯，我們可以發現Flutter應用的根組件會在runApp函數執行時約束發生變化，自動匹配當前屏幕大小。如果需要正确地顯示一個Container的大小，我們需要以非根組件的方式實現它。

在Flutter界面開發中，所有顯示的内容皆為組件。接下來，我們将要顯示一些文本到屏幕上，依照上一節的内容，直接将文本對象作為參數傳遞給runApp就可以了，如下圖8所示，

圖8

圖8中顯示的文本與狀态欄中的内容重疊了，導緻此問題的原因依舊是上一節内容中所遇到的問題：根組件會布滿整個屏幕。我們同樣可以采用上一節的方法實現将文本居中顯示的功能，如下圖9中的代碼所示。

圖9

圖9中我們将Container對象作為根組件，并指定其alignment為居中顯示，這樣文本内容便可以正常的顯示在屏幕的中央了。

圖10

以上兩節内容，我們顯示了Container組件，也顯示了文本組件。對于圖像來說，它也是一個組件，下面我們将Flutter的圖标顯示至屏幕上。

圖11

圖11中，我們通過調用函數FlutterLogo構建出FlutterLogo組件，并将其作為參數傳遞給runApp函數，其顯示效果為如圖12所示

圖12

Flutter應用開發中需要時刻牢記“一切皆為組件”的思想，本文通過三種類型的組件展示了如何将Container對象、文本對象和圖像顯示在屏幕上。在進行展示組件時，根組件一定是由runApp函數進行調用，其它的組件需要顯示時，将其在界面樹中進行添加和調整。