Flutter 快捷開發 Mac Android Studio 篇

老孟Flutter發表於2020-07-15
FlutterMacAndroid

老孟導讀：此快捷方式適用於Mac下的 Android Studio 。Windows 下的快捷方式請參考這篇文章：juejin.im/post/5efe71…

快速建立一個新的Stateless or Stateful元件

建立新的 Stateless 元件，輸入stless，回車：

建立新的 Stateful 元件，輸入 stful，回車：

建立新的 動畫元件，輸入 stanim，回車：

還有其他的一些快捷方式，這裡不一一介紹，這些快捷方式在 Preferences 中可以找到，路徑：Preferences -> Editor -> Live Templates:

Dart 和 Flutter 下就是快捷方式，也可以進行修改，上面我的快捷方式直接匯入包和註釋，是自己加的，預設是沒有的：

自定義快捷鍵，選中 Flutter，點選右上角的 + 號，選擇 Live Template，然後輸入名稱和生成的程式碼，點選 OK。

最低部會出現警告，選中 Dart ，點選 OK。

使用的方法是一樣的，輸入 test，回車即可。

File And Code Templates

建立 Dart 檔案時，生成預設程式碼，開啟 Preferences -> Editor -> File And Code Templates，選中右側的 Files 標籤，預設裡面是空的

加入自動生成程式碼：

import 'package:flutter/material.dart';

///
/// des:
///
class ${NAME} extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
複製程式碼

建立一個 home_page 的 dart 檔案：

新建立的 dart 檔案自動生成了預置的程式碼。

格式化程式碼

快捷鍵：option + command + L（字母 L 鍵）

清除無用引用

快捷鍵：control + option + O（字母 O 鍵）

前進/後退游標的位置

當跟蹤程式碼的時候，經常跳轉到其他類，後退快捷鍵：option+command+方向左鍵，前進快捷鍵：option+command+方向右鍵，

檢視當前類的繼承關係

快捷鍵： control + H

注意：選中 build 中 Container ，按快捷鍵無效，必須進入 Container 原始碼，選中 Container 類名，才可以。

註釋

單行註釋：command + / 。

多行註釋/**/：option + command + / 或者選中多行 ：command + /

查詢引用

選中要查詢的類或者方法，按下快捷鍵：command + G，底部彈出引用列表。

自動引入包

快捷鍵：option + 回車，選擇正確的包。

自動定位

右側進入一個程式碼檔案時，左側自定定位到此檔案，在 project 標籤 設定中勾選 Autoscroll to source 和 Autoscroll from source。

注意左側 project 標籤變化。

當前檔案搜尋

快捷鍵： command + F

全域性搜尋

快捷鍵：command + shift + F

搜尋檔案：

快捷鍵：點選2次 shift

自動生成建構函式：

選中 final 引數，快捷鍵：option + 回車

新增父元件、變為子元件、刪除子元件

快捷鍵： option+回車

可以給當前元件新增 Center、 Padding、Column 等父元件。

也可以選擇元件進行刪除、移動元件。

檢視UI大綱

開啟 Flutter Outline 標籤

可以清楚的看清 UI 結構。

將程式碼提取到方法中

開啟 Flutter Outline 標籤，點選向右箭頭的圖示：

Flutter 資源網站

  1. 官網：flutter.dev/
  2. 中文網：flutterchina.club/
  3. Flutter 中文社群資源：flutter-io.cn/
  4. pub(國內)：pub.flutter-io.cn/
  5. pub：pub.dev/
  6. DartPad：dartpad.dartlang.org/
  7. Dart 官網：dart.dev/
  8. CodePen：codepen.io/
  9. Json 轉實體類：javiercbk.github.io/json_to_dar…

最後隆重推薦一下我的部落格：laomengit.com/flutter/wid…，包含了 330 個元件詳細用法和 Flutter 實戰系列文章。

交流

老孟Flutter部落格地址（330個控制元件用法）：laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：

相關文章