用 SwiftUI 拉出計算機
第一次使用 swiftUI
在我上完關於 swift 課程後想要先休息一陣子，結果不知不覺就過了三個月沒有寫 code，這種惰性自己都覺得可怕。 在這期間出現新的東西： Swift UI，現在我買了本書並趁著黑色星期五入手 raywenderlich 一年會員來吸收新知識，希望之後能夠每天空出一些時間來練習並順便把之前沒做完的半成品做完。
這次的計算機並沒有實作出功能，而是注重在怎麼用 SwiftUI 把計算機的外觀拉出來，之後的文章會記錄我還沒很熟習的程式碼，而不會把全部程式碼解釋一遍。
▼SwiftUI 一開始的固定格式
ContentView 裡面定義實際呈現的UI，ContentView_Previews 則是能夠把 ContentView 的資料呈現到畫面上。
這邊比較特別的是如果想要多其他不同的裝置，在 ContentView_Previews裡面使用 previewDevice(“device name”) 就能增加新的裝置了。
▼按鈕
9行的 action 後面的閉包是當點選按鈕時會執行，在這裏沒有要執行東西所以用自己宣告的 action 補上，第二個閉包則是會回傳按鈕所需要顯示的內容。
▼按鈕類型
這邊用 enum 分類按鈕類型，可以分成4類，0~9的數字 digit，小數點 dot，加.減.乘.除的運算元Op以及剩餘的命令 Command，接著用 extension 加上按鈕顏色以及按鈕顯示的字型。
這裡對我來說沒有一時看懂的地方有幾個地方：
28行中 switch self 的 self 是代表什麼？這裡指的是被宣告成CalculatorButto-nItem 的變數，在變數被宣告之後，可以在後面接上 . 來選擇四類其中一類，而不用自己輸入。
34與36行的 rawValue 有什麼作用？ 當還沒加上 rawValue 前，若選擇 .op 或者 .command ，則會回傳 CalculatorButtonItem.(op case / command case) 而不是在 case 後面等號的東西， 因此需要加上 rawValue，加上之後回傳的就是等號後面的 String。
43行的條件式 if 為什麼長得那麼奇怪？經過查詢 google 後，發現這是 if-case的使用方法(就只是 switch-case 的縮寫方法而已)， self 與28行的 self 用法是一樣的，這裡因為計算機的按鈕0比其他按鈕大， 因此設定條件 value ==0。
最後是62行的 Hashable()，這個的作用是什麼？ 這邊基本上是為了讓 For-Each 能夠使用，雖然目前看起來很奇怪，但是我會在按鈕橫列的排法繼續解釋。
▼橫列按鈕的顯示
6 行的 ForEach 詳細解釋在下方參考資料的 SwiftUI 的 ForEach 連結，這裡我簡單解釋，ForEach 是利用 id 來區別陣列裡面的成員，當傳入自訂型別的陣列時需要額外設定 id，這裡設定 \.self 的意思是代表陣列的成員自己就是 id (e.g .command(.clear) 的 id 就是 .command(.clear))。但是作為 ID 的先決條件是要遵守 Hashable protocol，所以會在CalculatorButtonItem 的最後一行加上 Hashable 。
▼排出全部按鈕
這裡就只是將按鈕排出來，沒什麼特別的。
▼將按鈕呈現出來
最後我認為相對不重要的程式碼我都使用註解解釋。
▼結果
▼GitHub
▼參考資料
