iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

從零開始的Flutter世界系列 第 11

Day11 認識並設置 Android Studio 環境

  • 分享至 

  • xImage
  •  

偏好設定

我們可以對 Android Studio 進行許多的偏好設定,以下就簡單介紹幾點我覺得好用的地方,在這推薦給大家

  1. 設置 Android Studio 的Theme,使用夜色模式,對之後要長久看程式碼的我們來說,能夠加減舒緩我們眼睛的壓力https://ithelp.ithome.com.tw/upload/images/20200925/20118479lnStiesyQn.png

  2. 依自己的喜好,設定字體大小、行距 https://ithelp.ithome.com.tw/upload/images/20200925/20118479SWGllU23ru.png

  3. 設定在儲存時讓Android Studio 幫我們自動排版,以及Hot Reload,這讓我們在編寫程式碼時,能夠很方便的整理代碼,而Hot Reload 能讓我們快速看到即時的畫面 https://ithelp.ithome.com.tw/upload/images/20200925/20118479as52gUgDYh.png

  4. 設定快捷鍵

    如果我們有常對menu 做的動作,我們可以把它加入到快捷鍵,像建立新的 flutter 專案,以往要透過點擊menu 的 File → New → New Flutter Project,而我們來把這個動作加到快捷鍵吧!

    在preference 的 Keymap 搜尋關鍵字,並對其按 Add keyboard shortcut,就可以編輯成自己想要的快捷鍵囉,而我們設定的快捷鍵,也會出現在menu上囉
    https://ithelp.ithome.com.tw/upload/images/20200925/20118479iN3sQCpsQo.png

專案目錄結構

https://ithelp.ithome.com.tw/upload/images/20200925/20118479abv22Q2KV3.png

我們著重注意一下幾個地方

  1. 點選側欄 Project可以展開/收起 我們的專案目錄

  2. android / ios 資料夾:擺放各平台相關的程式碼,有寫過android或iOS 的人應該會對資料夾裡面的內容覺得很熟悉,沒經驗的也不用怕,只要知道Flutter 會自動背地裡幫我們產生android 跟 iOS 的app

  3. lib 資料夾:擺放我們Flutter 專案主要程式碼的地方

  4. test 資料夾:存放測試程式碼的地方

  5. pubspec.yaml 檔案:專案依賴配置的檔案,一般存放一些第三方庫的依賴

tips

以下介紹幾個Android Studio 簡單的技巧

  1. 將專案目錄的所有資料夾都收縮起來

    https://ithelp.ithome.com.tw/upload/images/20200925/20118479HKXaq9Ja3x.png

  2. 指出選擇的檔案在專案目錄裡的路徑,我們所選擇的檔案會被選取,其路徑會被展開

    https://ithelp.ithome.com.tw/upload/images/20200925/201184793sVrEvvXYO.png

  3. Dart analysis

    會告訴我們程式碼可能有警告或出錯的地方

    https://ithelp.ithome.com.tw/upload/images/20200925/20118479xGpdn2uTRU.png

    我們把最後一個}註解掉,它即會跟我們說在main.dart 的117行 缺少 },或者點擊兩下,即會跑至該警告或錯誤所在的程式碼位置

  4. Flutter outline

    會把.dart 程式碼,用一個樹狀結構來顯示我們的程式碼的大綱,點擊大綱內的內容,程式碼也會移到該地方

    https://ithelp.ithome.com.tw/upload/images/20200925/20118479AHK6jFDAxi.png

  5. Flutter inspector

    用於可視化以及瀏覽Flutter 的widget 樹的工具,可用來理解現有的畫面佈局,診斷畫面問題,可點選按鈕轉換 Select widget 模式,此時點擊畫面上的widget ,即可查看對應的佈局,程式碼也會跳至對應的位置,方便我們快速修改

    https://ithelp.ithome.com.tw/upload/images/20200925/20118479I0S7inm0M1.png

    還有Debug Paint 功能可以切換顯示 borders, padding, alignment, and spacers

    https://ithelp.ithome.com.tw/upload/images/20200925/20118479YdFW7c1Mhm.png

  6. 下方小工具列的 Run

    會把我們執行app 的過程印出來,如果有出現異常錯誤,或者我們的print(),也會顯示在畫面上

  7. 有關於在寫程式碼的快捷鍵應用,建議可以在之後開發專案後,發現有常做重複的動作時,可以去這邊查看有沒有預設的快捷鍵

總結

今天先熟悉一下android studio 的簡單應用,明天開始再來寫我們的第一支Flutter 專案


上一篇
Day10 Dart 語言介紹<八> 非同步 Asynchrony support
下一篇
Day12 第一支 Flutter App
系列文
從零開始的Flutter世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言