Skip to main content

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 裡面寫程式。目標是：按下按鈕時，讀取滑桿的數字，並在畫布上畫出對應頻率的波浪！

% 這是 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 區域寫你的邏輯就好。
Back to top