本文將與你一起回顧如何在 VS Code 裡進行 Flutter 應用的開發。
1. 安裝和配置
根據 編輯工具設定 的指引來安裝 Dart 和 Flutter 擴展(也叫做插件)。
1.1 更新擴展程序
擴展的更新會定期發佈。默認情況下,當有可用的更新時 VS Code 會自動更新擴展。
手動安裝更新:
(1)點擊側邊欄的擴展按鈕
(2)如果 Flutter 擴展顯示有可用更新,點擊更新按鈕,然後重載。
(3)重啟 VS Code。
2. 創建項目
2.1 新建項目
通過 Flutter 入門應用模板新建 Flutter 項目:
(1)打開命令面板(Ctrl+Shift+P (macOS 用 Cmd+Shift+P))。
(2)選擇
Flutter: New Project 命令然後按 Enter。(3)輸入你想要的項目名。
(4)選擇項目地址。
2.2 從現有源代碼打開項目
打開現有 Flutter 項目:
(1)在 IDE 主窗口點擊 File > Open。
(2)選擇存放現有 Flutter 源代碼文件的目錄。
(3)點擊 Open。
3. 編寫代碼及查看問題
Flutter 擴展執行代碼分析,它提供:
- 語法高亮。
- 基於豐富輸入分析的代碼補全。
- 導航到類型聲明( Go to Definition 或 F12)和查找類型引用(Find All References 或 Shift+F12)。
- 查看所有當前代碼問題(View > Problems 或 Ctrl+Shift+M (macOS 用 Cmd+Shift+M))。所有問題分析都會在 Problems 面板展示:
4. 運行和調試
備忘
有多種方式能夠調試你的應用
- 使用 DevTools,它是一個運行在瀏覽器中的調試以及性能測試工具集。DevTools 取代了前一代基於瀏覽器的性能測試工具 Observatory,它包含了以前僅適用於 Android Studio 和 IntelliJ 的功能,例如 Flutter inspector。
- 使用 VS Code 的內置調試功能,例如設置斷點。
以下說明描述了 VS Code 可用的功能。更多使用 DevTools 的詳細信息請參考 DevTools 中的 Running DevTools from VS Code 文檔。
在 IDE 主窗口點擊 Debug > Start Debugging 或按 F5 開啟調試。
4.1 選擇目標設備
當一個 Flutter 項目在 VS Code 中打開,你會在狀態欄看到一些 Flutter 特有項,包括 Flutter SDK 版本和設備名稱(或者無設備信息)。
備忘
- 如果你沒看到 Flutter 版本號或者設備信息,你的項目可能不被識別為一個 Flutter 項目。請確認 VS Code Workspace Folder 的目錄中是否含有 pubspec.yaml。
- 如果狀態欄顯示無設備表明 Flutter 沒有發現任何已連接的 IOS、Android 或者模擬器。你需要連接設備或者啟動模擬器。
Flutter 擴展會自動選擇上次連接的設備。然而,如果你有多個設備/模擬器連接,點擊狀態欄的 device 查看屏幕頂部的選擇列表。選擇你要用來運行或調試的設備。
備忘
如果你嘗試運行 web 應用,但是 Chrome (web) 並不在目標列表中,請檢查是否啟用了 web,在 Building a web application 中進行了介紹。
4.2 無斷點運行
(1)在 IDE 主窗口點擊 Debug > Start Without Debugging,或者按 Ctrl+F5。狀態欄變橙色說明你正處於調試模式。
4.3 斷點運行
(1)如果需要,在源代碼中設置斷點。
(2)在 IDE 主窗口點擊 Debug > Start Debugging 或按 F5。
- 左側的調試側邊欄顯示堆棧幀和變量。底部的調試控制檯面板顯示輸出的日誌詳情。調試基於默認的配置。也可以通過點擊調試側邊欄頂部的齒輪創建 launch.json 文件自定義調試。你可以修改裡面的值。
Flutter 提供一流的開發週期,通過 Stateful Hot Reload 特性使你在幾乎修改代碼的同時就能看到變化。詳情請看 使用熱重載。
6. 進階調試
6.1 可視化佈局問題調試
在調試會話期間,命令面板 和 Flutter inspector 會添加一些額外的調試命令,包括:
- 切換 Baseline 繪製
- 每個 RenderBox 在底部繪製一條線。
- 切換重繪 Rainbow
- 重新繪製時在圖層上改變顏色。
- 切換慢模式橫幅
- 減慢動畫以啟用視覺檢查。
- 切換 debug 模式橫幅顯示
- 在運行調試構建時隱藏 debug 模式的橫幅 (banner)。
6.2 調試外部庫
默認情況下,Flutter 擴展禁止調試外部庫。啟用步驟:
(1)選擇 Settings > Extensions > Dart Configuration
(2)勾選 Debug External Libraries 選項。
如果你有其他我們應該提供的代碼提示建議,請 [告訴我們][]!
7.1 代碼輔助和快速修復
代碼輔助功能是特定代碼標識符相關的代碼修改。當光標放在 Flutter widget 上時,黃色燈泡圖標會指示可用的修改,可以通過點擊燈泡進行修改,或者使用快捷鍵 Ctrl+. (macOS 用 Cmd+.),如圖所示:
快速修復跟輔助類似,當一段代碼有錯誤並且可以輔助修正時才會顯示。
Widget 嵌套輔助
當你有個 widget 想包裝進一個容器 widget 時,例如你想把 widget 放入一個 Row 或者 Column。
Widget 列表嵌套輔助
和上面的輔助類似,但它嵌套的是一個 widget 的列表,而不是單個的 widget。
child 和 children 轉換輔助
將 child 轉換成 children,並且把參數值寫進一個 list。
7.2 代碼片段
代碼片段可以用來加速輸入通用類型代碼段。通過輸入前綴來調用,然後從代碼完成窗口中選擇:
Flutter 擴展包含以下片段:
- 前綴 stless:創建一個 StatelessWidget 子類。
- 前綴 stful:創建一個 StatefulWidget 子類,並且和 State 子類關聯。
- 前綴 stanim:創建一個 StatefulWidget 子類,並且把包含字段初始化的 State 子類和一個 AnimationController 關聯。
你也可以通過在 命令面板 執行Configure User Snippets來自定義片段。
7.3 鍵盤快捷鍵
熱重載
調試期間,在調試工具欄點擊重啟按鈕,或者按 Ctrl+Shift+F5 (macOS 用 Cmd+Shift+F5)執行熱重載。
鍵盤映射可以在 命令面板 執行Open Keyboard Shortcuts修改。
7.4 熱重載和熱重啟
熱重載的工作原理是將更新後的代碼注入 Dart VM(虛擬機)。不僅包括添加新類,還包括添加方法和字段到已有的類中。但有些類型的代碼是無法被熱重載的:
- 全部變量的初始化
- 靜態變量的初始化
- 應用的 main() 方法
對於這些更改,你無需結束調試過程而直接熱重啟 (hot restart) 你的應用。要執行熱重啟,執行 命令面板 的 Flutter:熱重啟命令,或者按 Ctrl+F5。
8. 故障排除
8.1 已知問題和反饋
所有已知 bug 在這個 issue 列表中記錄:Dart 和 Flutter 擴展 GitHub issue 追蹤。
我們非常歡迎 bugs/issues 和特性請求的反饋。在提交新 issue 之前:
- 在 issue 列表中查找看該問題是否已被記錄。
- 確保你已經更新最新版本插件。
提交新 issue 時,請包含 flutter doctor 輸出。
閱讀更多 技術剛剛好 的文章