Android Studio開發Flutter實用技巧
快捷鍵
以Android Studio + Mac為例:
1.快速創建Widget:在dart文件中輸入stf或st 1出現提示后按回車即可
2.快速修復: command +。
3.自動生成構造函數:選中final 參數,快捷鍵: option +回車
4.添加父組件、變為子組件、刪除子組件: option+回車
5.萬能的搜索:雙擊shift
6.查看最近打開的文件: command + E
7.重命名: fn+shift+f6
8.查看當前類結構: command + fn + f12
9.查看源碼:將光標放到要查看源碼的類名或方法名上,長按command 然后的點擊
10.查看類的子類:選中要查看的類,然后: command + B或option + command + B
11.將代碼更新到模擬器上:選中模擬器然后command + R
12.導入類的快捷鍵:將光標放在要導入類的上面,然后按option + enter
13.前進后退:當跟蹤代碼的時候,經常跳轉到其他類,后退快捷鍵: opt ion+command+方向左鍵,前進快捷鍵: opt ion+command+方向右鍵
14.全局搜索: command + shift + F
15.全局替換: command + shift + R
16.查找引用: option + shift + F7
以上快捷鍵是在Android Studio的macOS的keymap下,如果是Windows系統,將command 換成Ctr, option 換成Alt即可。
更多快捷鍵可參考: keyboard-shortcuts
自動補全
通過自動補全功能能夠讓你的開發效率提升不少,那么如何使用自動補全功能呢?
可以在Android Studio的Plugin中搜索Flutter Snippets 這個插件然后進行安裝:
有了這個插件后,AndroidStudio可以幫你自動補全主流widget的代碼。以下是觸發自動補全各種widget的縮寫:
●column: 創建一個Column Widget
●container: 創建一個Container Widget
●row: 創建一個Row Widget
●showDialog: 創建一個AlertDialog
代碼自動格式化
雖然我們可以通過快捷鍵option(alt)+command(ctrl)+L來在提交代碼是格式化,但是這種手動的方式
顯然不夠效率。下面我們來借助AS的保存時代碼自動格式化功能來釋放我們的雙手:在Settings >Language & Frameworks > Flutter 中選上"Format Code on Save"這個選項:
另外建議勾選0rganize imports on save這個選項,它會幫你移除沒有使用的導入。
提取Flutter代碼
Flutter最讓人頭疼的一點是的布局的嵌套,對于復雜的布局如果不進行任何重構的情況下會嵌套的非常深,從而降低代碼的可讀性不利于后期的維護。在課程中我們推薦的做法是將復雜的布局提取成一個函數或者-個組件,那么接下來給大家分享一個提 取FIutter代碼的技巧:
選中一個比較復雜的widget,鼠標右鍵進入Refactor > Extract Method,然后給這個方法取一個名字,AS可以自動把這塊代碼抽離出一個Method并為它添加對于對于的參數:
除此之外,我們還可以借助AS來將符合條件的代碼塊提取成一個Widget, 只需要在Refactor中選擇Extract Flutter Widget即可。
VS Code開發Flutter實用技巧
快捷鍵
以VS Code + Mac為例:
- 快速創建Widget:在dart文件中輸入stf或stl出現提示后按回車即可
- 快速修復:command + .
- 自動生成構造函數:選中 final 參數,快捷鍵:command + .
- 添加父組件、變為子組件、刪除子組件:command + .
- 重新打開 關閉的編輯頁面:command + shift + T
- 通過匹配文本打開文件:command + T
- 代碼格式化:shift + option + F
- 打開console :command + J
- 查看源碼:將光標放到要查看源碼的類名或方法名上,長按command 然后的點擊
- 查看類的子類:選中要查看的類,然后:command + F12
- 后退:當跟蹤代碼的時候,經常跳轉到其他類,后退快捷鍵:ctrl + -
- 導入類的快捷鍵:將光標放在要導入類的上面,然后按 command + .
- 全局搜索:command + shift + F
- 把當前行代碼和上一行/下一行代碼互換位置:option + 上↑/下↓
- 快速復制當前行:option + shift + 下↓
運行項目相關命令
flutter run: 運行當前連接設備
flutter run -d 設備id:運行指定設備
運行項目后:
q:終止運行
r:熱重載
command + k :清除終端輸出的信息
flutter clean :清理緩存,可用于更改代碼后運行有些異常,的一種處理方式。
flutter --version : 查看 Flutter 版本
自動補全
通過自動補全功能能夠讓你的開發效率提升不少,那么如何使用自動補全功能呢?
可以在VS Code的Plugin中搜索Flutter Snippets 這個插件然后進行安裝:
有了這個插件后,VS Code可以幫你自動補全主流widget的代碼。以下是觸發自動補全各種widget的縮寫:
●fcol: 創建一個Column Widget
●fcont: 創建一 個Container Widget
●frow: 創建一 個Row Widget
●ftxt: 創建一 個Text Widget
提取Flutter代碼
Flutter最讓人頭疼的一點是的布局的嵌套,對于復雜的布局如果不進行任何重構的情況下會嵌套的非常深,從而降低代碼的可讀性不利于后期的維護。在課程中我們推薦的做法是將復雜的布局提取成一個函數或者一個組件,那么接下來給大家分享一個提取Flutter代碼的技巧:
選中一個比較復雜的widget,然后通過快捷鍵command +。Refactor > Extract Method,然后給這個方法取一個名字,VS Code可以自動把這塊代碼抽離出一個Method并為它添加對于對于的參數:
除此之外,我們還可以借助VSCode來將符合條件的代碼塊提取成一個Widget,只需要在Refactor中選擇Extract Flutter Widget即可。