MATLAB GUI 完整教程

第一部分：为什么选择 MATLAB GUI？

在开始之前,先了解一下 MATLAB GUI 的优势：

• 强大的数值计算能力： GUI 的核心功能往往是调用 MATLAB 强大的算法进行计算、仿真和数据分析。
• 快速原型开发： MATLAB 提供了多种创建 GUI 的方法，可以非常快速地将想法变为可交互的原型。
• 集成度高： 可以轻松地将 Simulink 模型、数据可视化、文件 I/O 等功能集成到同一个应用程序中。
• 跨平台部署： 开发完成后，可以使用 MATLAB Compiler 将 GUI 打包成独立的可执行文件，分发给没有安装 MATLAB 的用户。

第二部分：创建 GUI 的两种主要方法

MATLAB 提供了两种主流的 GUI 开发方式：

1. GUIDE (GUI Development Environment)

   • 特点： 可视化拖拽设计器，所见即所得，通过拖拽控件（如按钮、文本框、坐标轴等）来布局界面，然后自动生成一个包含界面布局和初始化代码的 .fig 文件和一个对应的 .m 文件。
   • 适用人群： 初学者，或习惯于传统可视化设计工具的开发者。
   • 现状： MATLAB R2025a 及之后的版本中，GUIDE 已被 App Designer 取代，不再作为主要推荐工具，但很多旧项目仍在使用，了解它仍有价值。

2. App Designer

   • 特点： 这是 MATLAB 目前主推的、现代化的 GUI 开发环境，它是一个集成了布局设计器、代码编辑器和组件库的集成开发环境。
   • 优势：
     • 基于面向对象： 使用 class (类) 的形式组织代码，结构更清晰，更易于维护和扩展。
     • 丰富的 UI 组件： 提供了更多现代化的组件，如仪表盘、滑动条、日期选择器等。
     • 更好的代码组织： 界面代码和回调逻辑代码分离得更好，使用“组件浏览器”和“代码浏览器”可以方便地管理。
     • 实时预览： 可以在设计时实时预览界面效果。
   • 适用人群： 所有开发者，特别是希望构建现代化、功能复杂应用的用户。

本教程将重点介绍 App Designer，因为它是未来的方向。

第三部分：App Designer 入门实战

我们将通过一个实例来学习 App Designer，这个实例是一个简单的 “函数图像绘制器”，用户可以输入一个数学函数（如 sin(x)），设置 x 的范围，然后点击按钮在坐标轴上绘制出图像。

步骤 1：启动 App Designer

在 MATLAB 命令窗口输入 appdesigner 并按回车，会启动 App Designer。

appdesigner

步骤 2：设计界面布局

1. 查看组件库： 界面左侧是“组件库”，包含了各种 UI 控件。

2. 拖拽组件到设计视图：

   
   （图片来源网络，侵删）
   • 从“组件库”中拖拽一个 “数值输入字段” 到画布上，我们将用它来输入 x 的最大值，将其 Text 属性改为 "X 最大值:"。
   • 再拖拽一个 “数值输入字段”，将其 Text 属性改为 "X 最小值:"。
   • 拖拽一个 “编辑字段 (文本)”，将其 Text 属性改为 "输入函数，如 sin(x) 或 x^2"。
   • 拖拽一个 “按钮”，将其 Text 属性改为 "绘制图像"。
   • 拖拽一个 “坐标轴” 到画布上，用于显示图像。

3. 调整布局： 使用对齐线和布局工具，将控件排列整齐，选中多个控件后，在顶部工具栏可以找到对齐和分布的工具。

步骤 3：编写回调函数

回调函数是当用户与某个组件交互时（如点击按钮、输入文本）自动执行的代码。

1. 打开代码视图： 点击 App Designer 界面右上角的 "查看代码" 按钮（或按 F5），切换到代码视图。

2. 找到回调函数：

   • 在代码视图的左侧,有一个 “组件浏览器”。
   • 展开 UIFigure，然后找到你刚才添加的按钮，它默认名为 Button。
   • 右键点击 Button，选择 “回调” -> Add ButtonPushedFcn callback。
   • MATLAB 会自动跳转到代码编辑器，并为你创建一个空的函数 ButtonPushed，这就是按钮被点击时要执行的代码。

3. 编写绘图逻辑： 在 ButtonPushed 函数中，我们需要获取用户输入的值，然后调用 fplot 函数来绘图。

% Button pushed function: Button
function ButtonPushed(app, event)
    % 1. 获取用户输入的值
    % app 是当前应用的实例，可以通过它访问所有组件的属性
    x_max = app.XMaxEditField.Value; % 获取X最大值输入框的值
    x_min = app.XMinEditField.Value; % 获取X最小值输入框的值
    func_str = app.FunctionEditField.Value; % 获取函数字符串
    % 2. 清除坐标轴，为下一次绘图做准备
    cla(app.UIAxes);
    % 3. 使用 fplot 绘图
    % fplot 可以直接接受一个函数句柄或字符串
    % 我们使用 str2func 将字符串转换为函数句柄，这样更安全
    try
        % 定义一个匿名函数，将 x 的范围传递进去
        % 注意：fplot 的第一个参数是函数句柄，第二个是 [xmin, xmax]
        fplot(str2func(func_str), [x_min, x_max], 'LineWidth', 2);
        % 4. 添加标签和标题，使图像更清晰
        title(app.UIAxes, [func_str, ' 的图像']);
        xlabel(app.UIAxes, 'x');
        ylabel(app.UIAxes, 'y');
        grid(app.UIAxes, 'on'); % 添加网格
    catch ME
        % 如果函数输入错误，捕获异常并提示用户
        uialert(app.UIFigure, ME.message, '输入错误');
    end
end

代码解释：

• app.XMaxEditField.Value：app 是应用对象。XMaxEditField 是组件的名称（你可以在“组件浏览器”中重命名它以方便记忆）。.Value 属性获取该组件当前的值。
• cla(app.UIAxes)：cla 是 "clear axes" 的缩写，用于清除坐标轴内容，避免多次绘图时图像重叠。
• fplot(func, [xmin, xmax])：一个强大的 MATLAB 函数，用于绘制函数图像。
• str2func(func_str)：将字符串（如 'sin(x)'）转换为 MATLAB 可以执行的函数句柄。
• try...catch：错误处理机制，如果用户输入了无效的函数（如 abc(x)），程序不会崩溃，而是会弹出一个错误提示框。

步骤 4：运行和测试

点击工具栏上的 "运行" 按钮（绿色三角形），MATLAB 会启动你的 GUI 应用，现在你可以：

1. 在 "X 最小值" 输入 -pi。
2. 在 "X 最大值" 输入 pi。
3. 在 "输入函数" 框中输入 sin(x)。
4. 点击 "绘制图像" 按钮。

试试输入其他的函数,cos(x)、x^3 - 2*x，甚至 1/x，输入错误函数，看看错误提示是否出现。

第四部分：App Designer 核心概念深入理解

要成为一个熟练的 GUI 开发者，需要理解以下几个核心概念：

应用类 和 组件属性

• 应用类 (classdef ... end)：你的整个 GUI 应用就是一个类，这个类包含了所有的 UI 组件作为其“属性”。
• 组件属性：每个组件都有自己的属性，如 Value (值)、Text (文本)、Color (颜色)、Visible (可见性) 等，在 App Designer 的“组件浏览器”中选中组件后，右侧会显示其所有属性，可以在设计时设置，也可以在代码中通过 app.ComponentName.PropertyName 来访问和修改。

示例： 修改按钮的文本颜色

% 在某个回调函数中
app.Button.FontColor = 'red'; % 将按钮的文字颜色改为红色

回调函数

回调函数是 GUI 的“灵魂”，除了 ButtonPushed，还有许多其他类型的回调：

• ValueChanged：当组件的值发生改变时触发，在数值输入框中输入新数字、滑动条滑动时。
• KeyPressFcn：当用户在特定组件上按下键盘按键时触发。
• WindowCloseRequest：当用户关闭 GUI 窗口时触发，非常适合在此处执行清理工作或保存数据。

数据共享

在复杂的 GUI 中，不同的回调函数需要共享数据，有几种方法：

• 使用应用属性：这是最推荐、最规范的方法。

  1. 在“组件浏览器”上方，点击“添加公共属性”或“添加私有属性”。
  2. 为它命名,UserData。
  3. 这个 UserData 就成了 app 的一个属性，可以在任何回调函数中通过 app.UserData 来读写。

  示例：

  % 在 ButtonPushed 回调中
  app.UserData.x_data = linspace(0, 10, 100); % 存储数据
  % 在另一个回调中，比如一个“导出数据”按钮的回调
  export_data = app.UserData.x_data; % 读取数据
  disp(export_data);

• 使用全局变量 (global)：不推荐，会使代码变得混乱且难以维护。

创建可重用的组件

如果你的界面中需要多个功能相同的控件组（多个带标签的输入框），可以创建自己的自定义组件。

1. 在 App Designer 的 "主页" 选项卡中，点击 "新建" -> "自定义组件"。
2. 设计这个组件的外观和内部逻辑。
3. 将其打包后,就可以像使用普通组件一样，从组件库中拖拽使用了，这能极大提高开发效率。

第五部分：高级技巧与最佳实践

1. 代码风格与注释

   • 为你的回调函数和自定义属性添加清晰的注释,说明其功能。
   • 将相关的回调函数组织在一起,或者使用有意义的命名。

2. 处理耗时操作

   • 如果你的回调函数需要执行一个很长的计算（运行一个复杂的仿真），直接在回调中执行会导致 GUI 界面“卡死”，无响应。

   • 解决方案：使用 pause 或 drawnow

     function LongTaskButtonPushed(app, event)
         % 禁用按钮，防止用户重复点击
         app.LongTaskButton.Enable = 'off';
         for i = 1:100
             % 执行一小部分任务
             % ... some calculation ...
             % 暂停一小会儿，让 GUI 有机会更新
             pause(0.01); 
             % 或者强制重绘界面
             % drawnow; 
         end
         % 任务完成后，重新启用按钮
         app.LongTaskButton.Enable = 'on';
         uialert(app.UIFigure, '任务完成!', '提示');
     end

   • 更高级的解决方案：使用 parfeval 进行后台计算，这可以将计算任务放到 MATLAB 的后台工作池中执行，完全解放 GUI 线程。

3. 打包和部署

   • 当你的应用完成后,可以使用 MATLAB Compiler 将其打包成 .exe 文件。
   • 在 MATLAB 命令窗口输入 applicationCompiler，然后选择你的 App 文件（.mlapp 文件）进行打包。
   • 打包时,请确保勾选了所有需要打包的 MATLAB 工具箱，否则生成的 .exe 在没有安装 MATLAB 的电脑上可能无法运行。

第六部分：资源与进阶学习

• 官方文档： MathWorks 的官方文档是最好的学习资源，搜索 "App Designer" 或 "Create Apps with App Designer" 可以找到最详细、最权威的教程和示例。
  • App Designer Documentation
• MATLAB File Exchange： 这是一个巨大的代码库，你可以找到许多由全球用户分享的优秀 GUI 应用示例和自定义组件，是学习和寻找灵感的好地方。
  • MATLAB File Exchange - GUIs
• 实践： 最好的学习方式就是动手实践，尝试构建一个更复杂的应用，
  • 一个数据可视化工具,可以导入 .csv 文件并绘制多种图表。
  • 一个简单的图像处理工具,可以加载图片并进行灰度化、滤波等操作。
  • 一个与硬件交互的工具,通过串口读取传感器数据并实时显示。

希望这份详细的教程能帮助你顺利入门 MATLAB GUI 开发！祝你学习愉快！