Flutter 開發小技巧

aTaller發表於2020-05-18
Flutter

級別：★☆☆☆☆
標籤：「Flutter 開發小技巧」「Flutter 快捷鍵」「Flutter外掛」「Flutter程式碼塊」
作者：ITWYW
審校： aTaller團隊

前言 筆者在本文中將給大家介紹使用Visual Studio Code 開發 Flutter 專案過程中的一些小技巧。 下文中筆者提到的內容用到的縮寫有VSCode、AS。 本文中，VSCode 是 Visual Studio Code 的縮寫，AS 是 Android Studio 的縮寫。 本文分為三部分，第一部分是 VSCode 的外掛；第二部分是 VSCode 快捷鍵；第三部分是參考學習網址。

一、VSCode外掛

1. TODO Highlight 外掛

  // TODO: 後續要完成...
  // FIXME: 待修復...
複製程式碼

TODO Highlight

2. Better Comments

BetterComments

二、VSCode 快捷鍵

1. 操作專案快捷鍵

1.1 command + shift + p

command + shift + p ：可以建立專案或檢視外掛

command+shift+p

1.2 執行專案相關快捷鍵
flutter run: 執行當前連線裝置
flutter run -d 裝置id：執行指定裝置

執行專案後：
q：終止執行
r：熱過載
cmd + k ：清除終端輸出的資訊

flutter clean ：清理快取，可用於更改程式碼後執行有些異常，的一種處理方式。


flutter --version ： 檢視 Flutter 版本
  Flutter 1.17.1 • channel stable •
  https://github.com/flutter/flutter.git
  Framework • revision f7a6a7906b (4 days ago) •
  2020-05-12 18:39:00 -0700
  Engine • revision 6bc433c6b6
  Tools • Dart 2.8.2
複製程式碼
flutter run 的輸出資訊

Running Xcode build...                                                  
                                                   
 └─Compiling, linking and signing...                        22.9s
Xcode build done.                                           61.0s
Syncing files to device iPhone SE (2nd generation)...              305ms

Flutter run key commands.
r Hot reload. ???
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone SE (2nd generation) is available at:
http://127.0.0.1:61644/jB_NLEwxmYA=/
複製程式碼
1.3 開發、除錯相關快捷鍵
cmd+滑鼠左鍵：跳轉進入類、方法實現
滑鼠選中在某個類或方法，按住option鍵：檢視相應類的構造方法或方法所需引數等說明
control + '-'：返回到從哪兒來的地方

fn+f5：啟動除錯
print(): 除錯輸出
debugprint()：除錯輸出
複製程式碼

2. Flutter 程式碼塊

程式碼塊快捷鍵

statelessW 
statefulW
build 等
複製程式碼

相關程式碼塊實現都是由官方 Awesome Flutter Snippets 提供的。更多程式碼塊快捷鍵，可搜尋 Awesome Flutter Snippets 檢視詳情。

2.1 statelessW
class name extends StatelessWidget {
  const name({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}
複製程式碼
2.2 StatelessWidget
import 'package:flutter/material.dart';

StatelessWidget
複製程式碼
2.3 statefulW

class name extends StatefulWidget {
  name({Key key}) : super(key: key);

  @override
  _nameState createState() => _nameState();
}

class _nameState extends State<name> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}
複製程式碼
2.4 build
@override
  Widget build(BuildContext context) {
    return ;
  }
複製程式碼

搜尋 ext:dart 的時候出現的外掛。

3. Flutter 編輯程式碼快捷鍵

shift + control + R ：即可對某個 Widget 進行操作，如對某個 Widget 進行包裹一層。
option + 上↑/下↓ ：可以把當前行程式碼和上一行/下一行程式碼互換位置
command + shift + p` ：可以建立專案或檢視外掛
cmd + shift + y/cmd + j：調起控制檯
cmd + option + r：選中專案的資料夾 show in finder
open . ：可以開啟多個終端，開啟當前專案的資料夾
cmd + shift + f ： 程式碼格式化
control + g 跳轉到某一行
cmd + k + 0（數字0）：收起程式碼
cmd + k + j：展開程式碼
複製程式碼

三、參考學習網址

筆者微信：可加並拉入《aTaller技術交流群》。

筆者微信

關注我們的途徑有：
aTaller(簡書)
aTaller(掘金)
aTaller(微信公眾號)

推薦文章：
Flutter 常用 Widget 介紹
Flutter 圖片載入 Flutter 混合棧複用原理
Flutter Platform Channel 使用與原始碼分析
Flutter Platform View 使用及原理簡析
奇舞週刊

相關文章