基礎(chǔ)篇

第1章　基礎(chǔ)布局

1.1　什么是組件

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

在Flutter框架中，組件不可變（immutable），即一旦被創(chuàng)建就不可以再修改其中的內(nèi)容，但通常一個(gè)應(yīng)用程序在運(yùn)行時(shí)會(huì)有不少動(dòng)態(tài)內(nèi)容需要隨時(shí)改變，包括顯示不同的數(shù)據(jù)，跳轉(zhuǎn)頁(yè)面，甚至動(dòng)畫(huà)等，因此每當(dāng)程序內(nèi)部數(shù)據(jù)發(fā)生改變或因動(dòng)畫(huà)效果而導(dǎo)致用戶界面需要更新時(shí)，所有涉及的組件都會(huì)被摧毀并重制。Flutter框架對(duì)組件摧毀和重制的過(guò)程優(yōu)化到極致，所以并不需要過(guò)度擔(dān)心性能問(wèn)題。

圖1-1　新建Flutter項(xiàng)目時(shí)自動(dòng)生成的計(jì)數(shù)器程序

以每次新建Flutter項(xiàng)目時(shí)自動(dòng)生成的計(jì)數(shù)器程序?yàn)槔聊徽醒胗?個(gè)文本框，其中一個(gè)顯示固定文案，譯作“你已單擊按鈕這么多次”，另一個(gè)則用數(shù)字顯示用戶究竟單擊了多少次按鈕。這里按鈕指的就是程序右下角的那個(gè)懸浮按鈕，用戶單擊后可觀察到計(jì)數(shù)器加1。讀者應(yīng)該對(duì)該程序并不陌生，運(yùn)行效果如圖1-1所示。

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

本書(shū)先為讀者介紹3個(gè)負(fù)責(zé)渲染界面的組件，分別是FlutterLogo、PlaceHolder和Container組件，以加深讀者對(duì)組件和模塊化布局的認(rèn)識(shí)，同時(shí)也為以后的內(nèi)容和概念打下基礎(chǔ)。