MATLAB GUI 全方位教程

MATLAB 提供了多种创建 GUI 的方法，从简单的脚本到复杂的 App Designer，我们将从最基础、最经典的方法开始，逐步过渡到现代的 App Designer。

第一部分：基础入门 - 使用 GUIDE

GUIDE (GUI Development Environment) 是 MATLAB R2025a 之前创建 GUI 的主要工具，虽然现在官方推荐 App Designer，但 GUIDE 的原理简单直观，非常适合初学者理解 GUI 的核心概念。

1 什么是 GUI？

GUI 是一种用户与程序交互的界面，它包含各种控件，如按钮、文本框、下拉菜单、坐标轴等,让用户无需编写代码就能操作程序。

2 启动 GUIDE

在 MATLAB 命令窗口输入：

guide

这会弹出一个对话框，选择 "Blank GUI (Default)"，然后点击 "OK"，你会看到一个名为 untitled.fig 的布局编辑器。

3 GUIDE 界面简介

• 布局编辑器: 你在这里拖拽控件来设计你的界面。
• 组件面板: 包含所有可用的控件，如 Push Button, Static Text, Axes, Slider 等。
• 属性检查器: 选中任何一个控件（包括窗口本身），你都可以在这里修改它的属性，比如名字、颜色、大小等。

4 创建第一个简单的 GUI：计算器

我们将创建一个简单的加法计算器。

步骤 1: 设计布局

1. 从左侧组件面板拖拽以下控件到中间的布局区域：
   • 两个 Static Text (静态文本)：一个用于显示 "输入 A："，另一个用于显示 "输入 B："。
   • 两个 Edit Text (可编辑文本框)：用于用户输入数字。
   • 一个 Push Button (按钮)：用于触发计算，将其 String 属性改为 "计算"。
   • 一个 Static Text：用于显示结果，将其 String 属性清空，Tag 属性改为 result_display (方便在代码中引用)。
2. 调整控件的大小和位置,使界面整洁美观。

步骤 2: 编写回调函数 回调函数是当用户与控件交互时（如点击按钮）自动执行的代码。

1. 双击 "计算" 按钮，MATLAB 会自动打开一个与 untitled.m 关联的脚本文件，并定位到 pushbutton1_Callback 函数。
2. 在这个函数中,编写以下代码：

% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
    % hObject    handle to pushbutton1 (see GCBO)
    % eventdata  reserved - to be defined in a future version of MATLAB
    % handles    structure with handles and user data (see GUIDATA)
    % 1. 获取 Edit Text 中的值
    % handles.edit1 是 GUIDE 自动生成的句柄，对应第一个 Edit Text
    % str2double 将字符串转换为双精度浮点数
    % 如果输入的不是数字，str2double 会返回 NaN (Not a Number)
    valA = str2double(get(handles.edit1, 'String'));
    valB = str2double(get(handles.edit2, 'String'));
    % 2. 检查输入是否为有效数字
    if isnan(valA) || isnan(valB)
        set(handles.result_display, 'String', '请输入有效的数字！');
        return; % 终止函数
    end
    % 3. 进行计算
    result = valA + valB;
    % 4. 将结果显示在 Static Text 控件上
    % handles.result_display 是我们在属性检查器中设置的 Tag
    set(handles.result_display, 'String', num2str(result));
end

代码解释:

• get(handles.edit1, 'String'): 获取 Tag 为 edit1 的控件的 String 属性（即用户输入的文本）。
• str2double(): 将文本转换为数字。
• set(handles.result_display, 'String', ...): 设置 Tag 为 result_display 的控件的 String 属性。
• handles 是一个结构体，包含了 GUI 中所有控件的句柄，GUIDE 会自动帮你管理。

步骤 3: 运行 GUI 点击工具栏上的绿色 "运行" 按钮（或按 F5），MATLAB 会保存你的 .fig 和 .m 文件，并显示你的 GUI 界面，现在你可以在两个框里输入数字，点击 "计算" 按钮,结果就会显示出来。

第二部分：现代方法 - 使用 App Designer

App Designer 是 MATLAB R2025a 及之后版本推荐的新一代开发环境，它使用面向对象的方式，将界面（.fig）和代码（.m）整合在一个 .mlapp 文件中，功能更强大,体验更好。

1 启动 App Designer

在 MATLAB 命令窗口输入：

appdesigner

这会打开一个空白的 App 设计画布。

2 App Designer 界面简介

• 组件库: 位于左侧，包含丰富的 UI 组件，包括 GUIDE 中的所有控件，以及一些高级组件（如仪表盘、数据表格等）。
• 画布: 中间的设计区域,用于拖放和布局组件。
• 组件浏览器: 右侧上半部分，以树状结构显示 App 中的所有组件和代码。
• 代码浏览器: 右侧下半部分，显示 App 的所有回调函数和辅助方法。
• 属性检查器: 右侧最下方,用于修改选中组件的属性。

3 用 App Designer 重写计算器

我们将用更现代的方式实现同样的功能。

步骤 1: 设计布局

1. 从左侧组件库拖拽以下组件到画布上：
   • 两个 Label (标签)：一个 Text 属性设为 "输入 A："，另一个为 "输入 B："。
   • 两个 Numeric Field (数字字段)：比 Edit Text 更适合输入数字。
   • 一个 Button (按钮)：Text 属性设为 "计算"。
   • 一个 Label：Text 属性清空，Name 属性改为 ResultLabel (方便在代码中引用)。
2. 调整布局。

步骤 2: 编写回调函数 App Designer 使用事件驱动编程，选中 "计算" 按钮，在右侧的 属性检查器 中找到 Callbacks 部分，点击 ButtonPushed 旁边的 号，MATLAB 会自动为你创建一个 CalculateButtonPushed 回调函数。

% Callback function for the "Calculate" button
function CalculateButtonButtonPushed(app, event)
    % 1. 获取 Numeric Field 中的值
    % app.NumericField1 是 App Designer 自动生成的属性
    valA = app.NumericField1.Value;
    valB = app.NumericField2.Value;
    % 2. 进行计算
    result = valA + valB;
    % 3. 将结果显示在 ResultLabel 上
    app.ResultLabel.Text = num2str(result);
end

代码解释:

• app.NumericField1.Value: 直接通过 app 对象访问组件的属性。app 是整个 App 的实例,包含了所有组件的属性。
• app.ResultLabel.Text: 直接设置 ResultLabel 组件的 Text 属性。
• 这种方式比 GUIDE 的 get/set 更简洁、更直观。

步骤 3: 运行 App 点击工具栏上的 "运行" 按钮，你的 App 就会启动，它的外观和行为与 GUIDE 版本类似，但代码结构更清晰、更易于维护。

第三部分：核心概念详解

无论使用 GUIDE 还是 App Designer,理解以下核心概念至关重要。

1 控件

GUI 的基本元素。

• 按钮: 用户点击后触发动作。
• 文本框: 用于显示或输入文本。
• 静态文本: 只用于显示信息,用户不能修改。
• 坐标轴: 用于绘制图形。
• 滑块: 用户通过拖动来选择一个范围内的值。
• 下拉菜单: 从列表中选择一个选项。

2 句柄

句柄是 MATLAB 用来唯一标识一个图形对象（如窗口、按钮、坐标轴）的数字或名称,你可以通过句柄来操控这个对象。

• GUIDE: handles 结构体包含了所有控件的句柄。handles.axes1 是坐标轴的句柄。
• App Designer: 你可以直接通过 app.componentName 来访问组件句柄（实际上是组件的属性）。

3 回调函数

当特定事件发生时执行的函数。

• 常见回调:
  • Callback: 最通用的回调，如按钮点击、下拉菜单选择等。
  • KeyPressFcn: 当用户在控件上按下键盘时触发。
  • CreateFcn: 当控件被创建时触发。
  • DeleteFcn: 当控件被删除时触发。
  • ButtonDownFcn: 当用户在控件上点击鼠标时触发。

4 数据传递

在 GUI 中,经常需要在不同的回调函数之间共享数据。

• GUIDE:
  • 使用 handles 结构体: 这是最推荐的方法，你可以在任何回调中向 handles 添加你自己的字段，handles.myData = 100;，然后在其他回调中通过 myData = handles.myData; 来读取。注意：在修改 handles 后，最好调用 guidata(hObject, handles) 来保存更改。
• App Designer:
  • 使用 app 属性: 这是最自然的方式，你可以在任何回调中定义 app.myData = 100;，然后在其他回调中通过 myData = app.myData; 来访问。app 对象在整个 App 生命周期中都存在。

5 绘图

在 GUI 的坐标轴中绘图是常见需求。

% 假设 handles.axes1 是你的坐标轴句柄 (GUIDE)
% 或者 app.UIAxes 是你的坐标轴 (App Designer)
% 1. 获取坐标轴句柄
% ax = handles.axes1; % GUIDE
ax = app.UIAxes;      % App Designer
% 2. 绘图
plot(ax, x, y); % 在指定的坐标轴上绘图ax, '我的正弦波');
xlabel(ax, 'X 轴');
ylabel(ax, 'Y 轴');
grid(ax, 'on');

关键点: 明确指定要在哪个坐标轴上绘图,避免覆盖其他图形。

第四部分：进阶技巧

1 使用对话框

msgbox (消息框), questdlg (问题对话框), uigetfile (文件选择对话框) 等可以增强用户体验。

% 显示一个简单的消息框
msgbox('计算完成！', '提示', 'help');
% 显示一个问题对话框
answer = questdlg('确定要退出吗？', '退出确认', '是', '否', '否');
if strcmp(answer, '是')
    delete(gcbf); % 关闭当前图形窗口
end

2 使用计时器

如果你的 GUI 需要定期执行某个任务（如实时更新数据），可以使用 timer 对象。

% 在 App Designer 的 StartupFcn 中初始化计时器
function StartupFcn(app)
    % 创建计时器，每2秒执行一次 UpdateData 函数
    app.timer = timer('TimerFcn', @(~,~) UpdateData(app), 'Period', 2, 'ExecutionMode', 'fixedRate');
    start(app.timer);
end
% 更新数据的回调函数
function UpdateData(app)
    % 这里执行需要定期更新的代码
    % 从传感器读取数据并更新到图表
    disp('更新数据...');
    % app.Value = get_new_value();
    % plot(app.UIAxes, app.Time, app.Value);
end
% 在 App 关闭时停止计时器
function CloseRequest(app, event)
    if isvalid(app.timer)
        stop(app.timer);
        delete(app.timer);
    end
    delete(app.UIFigure);
end

3 使用全局变量（不推荐）

虽然可以使用 global 关键字，但它会使代码难以调试和维护，容易出错。尽量使用 handles (GUIDE) 或 app (App Designer) 来传递数据。

总结与建议

给初学者的建议：

1. 从 App Designer 开始：如果你是新手，直接学习 App Designer，它是未来的趋势，代码更规范,体验更好。
2. 先模仿，再创造：跟着教程做一个简单的项目（如计算器），然后尝试给它添加新功能（如减法、乘法、除法）。
3. 理解 app 对象：在 App Designer 中，app 是你的核心，理解如何通过 app 访问和修改组件属性是关键。
4. 多看帮助文档：MATLAB 的官方文档非常详细，选中任何一个函数或控件，按 F1 查看其详细用法和示例。

GUI 编程是一个实践性很强的技能，多动手，多尝试，你很快就能熟练掌握 MATLAB 的 GUI 开发！