2.5 開發番茄鐘

本節將開發一個簡單的番茄鐘計時器，以鞏固本章介紹的理論基礎。

lib/main.dart是App的入口頁面，因此需要對默認代碼進行重寫。首先創建番茄鐘的首頁MyHomePage，它是帶有狀態的StatefulWidget，狀態類為＿MyHomePageState。在build方法中進行布局搭建，使用Scaffold組件搭建頁面的骨架。在Scaffold中，body表示頁面的內容區，這里通過Text組件展示了一段文本，并通過floatingActionButton屬性添加了一個懸浮按鈕。將main.dart的代碼替換如下：

運行代碼效果如圖2-5所示。

其中，界面中包含一個展示文本和一個懸浮按鈕。目前應用還不具備實際功能，將在下面小節中逐步進行實現。

2.5.1 使用Center組件進行居中顯示

在上面的代碼中，向Scaffold組件的body傳入了一個Center組件，其作用是在視圖容器中居中顯示。

如果不使用Center組件，而是直接向Scaffold傳入Text組件，運行程序會發現文本定位到了起始位置，即屏幕的左上角，如圖2-6所示。

2.5.2 Text文本展示組件

番茄鐘的主要功能是25 min倒計時，首先需要在屏幕上創建一個文本展示組件，來展示倒計時。在Flutter中，展示文本使用Text組件。

下面代碼創建了一個文本，其運行效果如圖2-7所示。

需要注意的是，Text組件需要被嵌套在Scaffold組件內部使用，如果跳過Scaffold直接使用Text，由于默認樣式沒有設置，會出現展示異常的效果，如圖2-8所示。

通過Text的style屬性可以方便地設置文本樣式。下面介紹一些基礎的樣式設置方法。

1 設置文本顏色

通過TextStyle樣式的color屬性可以修改文本顏色，示例代碼如下：

運行效果如圖2-9所示。

2 設置字體大小

通過TextStyle樣式的fontSize屬性可以修改文本大小，示例代碼如下：

運行效果如圖2-10所示。

3 文字加粗

通過TextStyle樣式的fontWeight屬性可以修改文本顏色，示例代碼如下：

運行效果如圖2-11所示。

4 倒計時文本組件

了解了Text組件的基礎使用后，下面回到番茄鐘工程，創建倒計時文本展示組件。將main.dart位于屏幕中心的Text替換為以下代碼：

其中設定了一個固定文本，在下一節對定時器的講解中，會通過狀態對其進行替換。再次運行main.dart效果如圖2-12所示。

2.5.3 添加Timer定時器

在應用開發中經常會使用到定時器，它能夠每隔一段時間觸發執行相應代碼。一種典型的應用場景是網絡輪詢請求，每隔固定時間發起請求，適用于一些需要定時與后端數據保持同步的應用場景。

Dart標準庫的async包中提供了定時器能力，具體實現類為Timer。

Timer的使用主要分為幾個步驟，首先在組件的初始化生命周期中創建一個Timer實例，在創建時需指定定時間隔（Duration），以及定時觸發時所需執行的代碼。

Timer有兩種工作模式：單次觸發與循環觸發。

對于單次觸發，定時器觸發一次后自動停止。創建方法如下：

其中，通過debugPrint方法可以輸出日志。

對于循環觸發，定時器會循環定時觸發下去，直到調用它的cancel（）方法手動停止。創建方法如下：

結合番茄鐘實例，基于周期為1s的定時器，創建一個狀態用于統計倒計時的秒數。具體代碼如下：

運行程序可以看到Logcat日志：

2.5.4 為按鈕添加單擊事件控制番茄鐘開始

現在文本展示、按鈕及定時器都已就緒，接下來需要將它們串起來。FloatingActionButton的onPress屬性用于設置按鈕單擊后的行為，這也是整個程序的觸發點。當單擊按鈕后，創建定時器開始計時，每次定時器觸發時都更新countDownSeconds狀態，每次狀態變化倒計時文本組件也會進行相應更新。如果定時器倒計時為0，還需要再關閉定時器，同時彈出一個對話框向用戶發出提示。具體實現代碼如下：

其中，將startCountDown設置為懸浮按鈕的回調函數，在其中啟動定時器。通過showDialog方法彈出對話框。parseText方法用于將countDown狀態從整數轉換為文本形式進行展示。pad-Digits方法的作用是將只有一位的整數通過補0將其擴充至兩位，使其更加美觀。

運行程序，倒計時中效果如圖2-13所示，倒計時完成后彈窗提示如圖2-14所示。