• Xcode 用 Storyboard 開發程式記錄 (1/4)
• Xcode 用 Storyboard 開發程式記錄 (2/4)
• Xcode 用 Storyboard 開發程式記錄 (3/4)
• Xcode 用 Storyboard 開發程式記錄 (4/4)

設計畫面

現在要在畫面上加一些元件。

先按下右上角紅框的＋號，會出現元件列表，把一個 Push Button 拉到畫面的 View 中。

同樣，再拉一個 Label 放在畫面上。

設計程式

現在要來寫一段程式，希望按下 Button 之後，Label 的文字變成 Hello World!。

先讓畫面停留在 Main.storyboard，也就是看到設計畫面。

然後按下鍵盤的 option 不放，接著點選紅框的 ViewController.swift

此時就會看到畫面與程式並列的情況，此時可以調整一下畫面，讓二者都可以呈現。

此時按著鍵盤的 control 鍵，然後把 Label 拉到畫面中的位置，會出現如圖中的線條。

放開滑鼠後，會出現如下對話框。

在 Name 填上這個 Lable 的連結名稱，此處為 lbText，然後按下 Connect。

這種連結稱為 Outlet。

此時就會看到出現這行程式碼，表示這個 Lable 在此名為 lbText，最前面的白色圓點表示是連結點。

若看這個 Label 右方的屬性欄，也可以看到紅框中的連結。

注意，如果要取消連結，除非程式該行要移除，這裡的連結也要移除才行。

用同樣的方式，按下 control，也幫 Button 拉一條連結線。

這次的 Connection 要選擇 Action，Name 我們取為 btOK，然後按下 Connect。

程式中就會多出這二行，表示按下 Button，就會執行這段程式。

把程式填上去，其實只有一行

lbText.stringValue = "Hello World!"

執行程式

按下上方 Play 的按鈕，就會編譯並執行程式。

程式執行的結果。

按下 Button，果然文字變成 Hello World! 了。