基礎篇

第1章　基礎布局

1.1　什么是組件

組件（Widget，也常被譯作控件或小部件等）是Flutter框架的基石。Flutter作為現代的UI框架，從React框架獲得靈感(1)，通過定義一個個相對獨立的小組件，再利用組件與組件之間的嵌套與配合，逐步搭建出復雜的用戶界面。Flutter框架自帶了大量的組件，其中大部分組件主要負責渲染用戶界面，例如文本框或圖片等，也有一部分組件負責處理人機交互，例如觸摸事件監聽或識別拖放操作等，還有一些功能性組件，例如媒體查詢組件等，可以獲得當前設備的尺寸及屏幕亮度等信息。

在Flutter框架中，組件不可變（immutable），即一旦被創建就不可以再修改其中的內容，但通常一個應用程序在運行時會有不少動態內容需要隨時改變，包括顯示不同的數據，跳轉頁面，甚至動畫等，因此每當程序內部數據發生改變或因動畫效果而導致用戶界面需要更新時，所有涉及的組件都會被摧毀并重制。Flutter框架對組件摧毀和重制的過程優化到極致，所以并不需要過度擔心性能問題。

圖1-1　新建Flutter項目時自動生成的計數器程序

以每次新建Flutter項目時自動生成的計數器程序為例，屏幕正中央有2個文本框，其中一個顯示固定文案，譯作“你已單擊按鈕這么多次”，另一個則用數字顯示用戶究竟單擊了多少次按鈕。這里按鈕指的就是程序右下角的那個懸浮按鈕，用戶單擊后可觀察到計數器加1。讀者應該對該程序并不陌生，運行效果如圖1-1所示。

不考慮程序的總體頁面結構，如導航條等，這個程序至少有3個核心組件，分別為2個渲染文字的Text組件，以及1個懸浮按鈕組件。它需要實現的功能是當用戶單擊按鈕后改變第2個Text組件中的文本。在傳統框架，如桌面開發、原生App開發或者不用框架的JavaScript中，常見思路是在“單擊按鈕”事件中編寫代碼，先修改存儲數字的變量，再利用已知控件名，配合findViewById或者getElementById等辦法找到負責渲染數字的那個控件，接著修改該控件的.text或者.value等屬性，使其顯示新的變量值，而Flutter框架則省去了后幾步，在按鈕單擊事件中修改變量，之后可直接通過調用setState方法通知Flutter引擎“部分數據發生了變化，用戶界面不一樣了，請重新繪制”。整個過程不需要開發者具體說明是哪部分數據發生了變化，導致了哪些界面需要重繪。Flutter引擎會刷新整個界面，通常在1ms內完成一切重繪。

本書先為讀者介紹3個負責渲染界面的組件，分別是FlutterLogo、PlaceHolder和Container組件，以加深讀者對組件和模塊化布局的認識，同時也為以后的內容和概念打下基礎。