# MATLAB App Designer (圖形化介面) 實戰速查表

# MATLAB App Designer (圖形化介面) 實戰速查表

App Designer 是 MATLAB 現代化設計 GUI (圖形化使用者介面) 的專屬工具，用來取代舊版的 GUIDE。它把畫面設計（Design View）跟程式邏輯（Code View）完美結合在一起。

## 1. 啟動與介面認識

在 MATLAB 指令視窗 (Command Window) 輸入 `appdesigner` 並按下 Enter，就會跳出專屬的設計視窗。

裡面主要分為兩個世界，你可以透過畫面右上角的按鈕隨時切換：
* 🎨 **Design View (設計視角)：** 左邊有元件庫 (Component Library)，你可以直接把「按鈕 (Button)」、「滑桿 (Slider)」、「畫布 (Axes)」拖拉到中間的空白視窗上排版。
* 💻 **Code View (程式視角)：** 這裡會自動生成所有 UI 元件的底層程式碼（背景是灰色的，你不能改）。你只能在「白色的區域」寫你自己的邏輯。

---

## 2. 核心靈魂：回呼函數 (Callback)

App 怎麼知道你按下了按鈕？這全靠 **Callback (回呼函數)**。
**白話文：** Callback 就是「當某個事件發生時（例如按鈕被點擊、滑桿被拉動），App 應該要去執行的那段程式碼」。

### 👉 如何幫按鈕加入 Callback？
1. 在 Design View 中，對著你拉出來的按鈕按**滑鼠右鍵**。
2. 選擇 **Callbacks** -> **Add ButtonPushedFcn callback**。
3. 畫面會瞬間切換到 Code View，並且幫你開好一個白色的區塊，把游標停在那裡等你寫程式！

---

## 3. 實戰範例：滑桿控制正弦波頻率

假設我們在畫面上拉了三個東西：
1. 一個畫布 (預設名稱會是 `app.UIAxes`)
2. 一個滑桿 (預設名稱會是 `app.Slider`)
3. 一個按鈕 (預設名稱會是 `app.Button`)

我們現在要在剛剛自動生成的按鈕 Callback 裡面寫程式。目標是：**按下按鈕時，讀取滑桿的數字，並在畫布上畫出對應頻率的波浪！**

```matlab
% 這是 App Designer 自動幫你生成的 Callback 結構
function ButtonPushed(app, event)

    % 1. 【讀取】滑桿現在的值 (Value)
    % 語法：app.元件名稱.屬性
    freq = app.Slider.Value;  
    
    % 2. 建立時間軸與計算訊號 (這跟我們平常寫的 MATLAB 一模一樣)
    t = 0 : 0.01 : 1;
    y = sin(2 * pi * freq * t);
    
    % 3. 【輸出】把圖畫在 App 專屬的畫布上 (⚠️ 初學者最常死在這裡！)
    % 以前我們直接寫 plot(t, y)，但在 App 裡「絕對不行」！
    % 你必須明確告訴 MATLAB 要畫在哪個元件上，否則它會另外彈出一個醜醜的 Figure 視窗。
    plot(app.UIAxes, t, y); 
    
    % 4. 美化 App 裡的畫布
    title(app.UIAxes, ['目前頻率: ', num2str(freq), ' Hz']);
    grid(app.UIAxes, 'on');

end
```

---

## 4. ⚠️ App Designer 新手避坑指南 (防雷守則)

1. **所有的變數前面都要加 `app.`**
   在一般的腳本裡，變數叫 `x` 就是 `x`。但在 App 裡面，如果你希望這個變數可以在不同的按鈕、不同的 Callback 之間共用（例如按鈕 A 算出來的結果，按鈕 B 要拿去存檔），你必須把它宣告為 **屬性 (Properties)**。
   * 操作方式：在 Code View 點擊上方的 `Property` 按鈕新增。
   * 使用方式：呼叫時必須寫成 `app.my_variable = 10;`。
2. **所有改變 UI 畫面的指令，第一個參數都是 `app.元件名稱`**
   * 畫圖：`plot(app.UIAxes, x, y)`
   * 改文字：`app.Label.Text = '計算完成！'`
   * 清除圖形：`cla(app.UIAxes)`
3. **千萬不要手動去改灰色區域的程式碼**
   那是系統自動生成的 UI 排版碼，一動很容易整個 App 崩潰。請乖乖在白色的 Callback 區域寫你的邏輯就好。