从零开始-MATLAB图形用户界面（GUI）设计入门

从零开始-MATLAB图形用户界面（GUI）设计入门

引用

CSDN

1.

https://m.blog.csdn.net/weixin_52908342/article/details/145230661

在现代软件开发中，图形用户界面（GUI）是与用户交互的关键部分。MATLAB作为一种广泛使用的科学计算和数据分析工具，提供了强大的GUI设计功能。本文将从零开始，带您了解如何在MATLAB中设计简单的GUI，涵盖基础知识、关键组件以及示例代码，帮助您快速入门。

MATLAB GUI概述

GUI的定义

图形用户界面（GUI）是一种允许用户通过图形元素（如按钮、文本框、菜单等）与软件进行交互的界面。在MATLAB中，GUI为用户提供了直观的操作方式，使得数据分析和可视化变得更加简单。

MATLAB中的GUI工具

MATLAB提供了两种主要的GUI设计方法：

• GUIDE（图形用户界面开发环境）：一个可视化的工具，可以通过拖放组件来创建GUI。
• App Designer：MATLAB的现代GUI开发环境，支持更多的功能和灵活性。

本文将重点使用App Designer进行GUI设计。

使用App Designer创建基本GUI

启动App Designer

1. 打开MATLAB。
2. 在命令窗口中输入 appdesigner，并按回车。这将启动App Designer界面。

创建新应用

1. 在App Designer中，选择“新建应用”。
2. 选择“空白应用”模板。

设计界面

在App Designer的设计视图中，您可以通过拖放方式添加UI组件，如按钮、标签、文本框等。以下是一些常用组件的介绍：

• 按钮（Button）：触发事件或操作。
• 文本框（Edit Field）：用于用户输入数据。
• 标签（Label）：显示静态文本。
• 图形轴（Axes）：用于绘制图形。

示例：创建简单的计算器

接下来，我们将创建一个简单的计算器应用，用户可以输入两个数字，并选择加法或减法操作。

2.4.1 设计界面
在App Designer中，添加以下组件：

• 两个文本框（Edit Field），分别命名为 Number1 和 Number2。
• 两个按钮，分别命名为 AddButton（标签为“加法”）和 SubtractButton（标签为“减法”）。
• 一个标签（Label），用于显示结果，命名为 ResultLabel。

2.4.2 编写回调函数
在App Designer的代码视图中，为按钮添加回调函数。以下是完整的示例代码：

classdef SimpleCalculator < matlab.apps.AppBase
    % UI组件的定义
    properties (Access = public)
        UIFigure       matlab.ui.Figure
        Number1       matlab.ui.control.EditField
        Number2       matlab.ui.control.EditField
        AddButton      matlab.ui.control.Button
        SubtractButton matlab.ui.control.Button
        ResultLabel    matlab.ui.control.Label
    end
    methods (Access = private)
        % 加法按钮的回调函数
        function AddButtonPushed(app, event)
            num1 = str2double(app.Number1.Value);
            num2 = str2double(app.Number2.Value);
            result = num1 + num2;
            app.ResultLabel.Text = ['结果：', num2str(result)];
        end
        % 减法按钮的回调函数
        function SubtractButtonPushed(app, event)
            num1 = str2double(app.Number1.Value);
            num2 = str2double(app.Number2.Value);
            result = num1 - num2;
            app.ResultLabel.Text = ['结果：', num2str(result)];
        end
    end
    % 应用的创建和组件的设置
    methods (Access = public)
        % 应用构造函数
        function app = SimpleCalculator
            createComponents(app)
        end
        % 应用组件的创建
        function createComponents(app)
            % 创建UI Figure
            app.UIFigure = uifigure('Visible', 'off');
            % 创建文本框
            app.Number1 = uieditfield(app.UIFigure, 'text');
            app.Number1.Position = [100 150 100 22];
            app.Number2 = uieditfield(app.UIFigure, 'text');
            app.Number2.Position = [100 120 100 22];
            % 创建按钮
            app.AddButton = uibutton(app.UIFigure, 'push');
            app.AddButton.Position = [100 80 100 22];
            app.AddButton.Text = '加法';
            app.AddButton.ButtonPushedFcn = @(src,event) AddButtonPushed(app, event);
            app.SubtractButton = uibutton(app.UIFigure, 'push');
            app.SubtractButton.Position = [100 50 100 22];
            app.SubtractButton.Text = '减法';
            app.SubtractButton.ButtonPushedFcn = @(src,event) SubtractButtonPushed(app, event);
            % 创建结果标签
            app.ResultLabel = uilabel(app.UIFigure);
            app.ResultLabel.Position = [100 20 200 22];
            % 显示UI Figure
            app.UIFigure.Visible = 'on';
        end
    end
end

运行应用

在App Designer中，单击“运行”按钮。您将看到刚才创建的简单计算器GUI。在两个文本框中输入数字，然后单击加法或减法按钮，结果将显示在标签中。

深入理解GUI设计

事件驱动编程

MATLAB GUI基于事件驱动编程，即用户的每一次操作（如按钮点击、文本输入）都会触发相应的回调函数。这种设计使得程序的逻辑更加清晰。

组件属性

每个UI组件都有一组属性，您可以通过MATLAB代码或在App Designer的属性编辑器中进行设置。常见的属性包括：

• Position：组件在界面中的位置和大小。
• Text：组件显示的文本内容。
• Enable：组件是否可用。

布局管理

良好的布局管理可以提高用户体验。在设计GUI时，应考虑组件的对齐、间距和整体视觉效果。MATLAB提供了多种布局工具（如Grid Layout和Flow Layout），帮助您更好地管理界面布局。

进一步的功能扩展

在掌握了基本的GUI设计之后，您可以考虑扩展应用的功能。例如，您可以添加更多的数学操作（如乘法、除法），或者使用图形轴组件展示计算结果的图形化表现。以下是一些建议的扩展功能：

• 历史记录：添加一个文本区域，显示过去的计算历史。
• 输入验证：在用户点击按钮之前检查输入是否合法（例如，确保输入为数字），并在界面上提供相应的反馈。
• 数据可视化：利用图形轴展示输入数字的图形表示，例如，使用柱状图显示两个数的比较。

以下是一个简单的代码示例，展示如何实现输入验证：

function AddButtonPushed(app, event)
    num1 = str2double(app.Number1.Value);
    num2 = str2double(app.Number2.Value);
    
    if isnan(num1) || isnan(num2)
        app.ResultLabel.Text = '请输入有效的数字';
    else
        result = num1 + num2;
        app.ResultLabel.Text = ['结果：', num2str(result)];
    end
end

在这个代码示例中，我们在进行加法操作之前检查输入是否为有效的数字，如果不是，则在标签中显示错误信息。这不仅提高了应用的健壮性，还提升了用户体验。

响应式设计

随着不同设备和屏幕尺寸的普及，响应式设计变得越来越重要。确保您的GUI在不同的设备上都能良好运行，可以使用相对单位和动态布局。MATLAB的App Designer允许开发者使用相对位置和大小设置组件，确保应用在不同分辨率和设备上自适应。

例如，您可以使用 Percent 单位来设置组件的宽度，使其随窗口大小变化而自动调整，从而保持良好的可用性和美观度。

app.Number1.Position = [0.1 * app.UIFigure.Position(3), 150, 0.8 * app.UIFigure.Position(3), 22];

在上述代码中，Number1 文本框的宽度设置为其父窗口宽度的80%，确保在不同分辨率下都能适应。

通过这些深入的设计理念和代码示例，您将能够创建功能丰富、用户友好的MATLAB GUI应用。随着对MATLAB GUI设计的进一步探索，您会发现更多的可能性和灵活性，使您的应用更加专业和实用。

实践项目：构建一个简单的计算器

在这一部分，我们将构建一个简单的计算器应用，结合之前讨论的各个方面，从设计到实现。我们将利用MATLAB的App Designer来创建GUI，用户可以通过这个计算器进行基本的加法和减法运算。

项目准备

1. 打开MATLAB App Designer：

• 在MATLAB命令窗口中输入 appdesigner，打开App Designer界面。

2. 新建应用：

• 点击“新建应用”，选择“空白应用”模板。

3. 设置应用标题：

• 在右侧的“属性”面板中，将应用的名称设置为“简单计算器”。

创建用户界面组件

在设计界面时，您可以拖放以下组件到设计区域：

• 文本框（用于输入第一个数字）：
• 在组件库中找到“文本框”，拖动到设计区域，设置其名称为 Number1。
• 文本框（用于输入第二个数字）：
• 同样添加一个文本框，设置名称为 Number2。
• 按钮（用于加法运算）：
• 添加一个按钮，设置其文本为“加法”，名称为 AddButton。
• 按钮（用于减法运算）：
• 添加一个按钮，设置其文本为“减法”，名称为 SubtractButton。
• 标签（用于显示结果）：
• 添加一个标签，设置其文本为“结果：”，名称为 ResultLabel。

设置组件属性

您可以通过右侧属性面板设置每个组件的属性，例如调整位置和大小，使其看起来更美观。以下是组件设置的建议：

• Number1 和 Number2 的位置可以设置为(20, 50)和(20, 100)。
• AddButton 的位置可以设置为(20, 150)，SubtractButton 的位置设置为(100, 150)。
• ResultLabel 的位置设置为(20, 200)。

添加回调函数

现在，我们需要为按钮添加回调函数，以便在用户点击按钮时执行相应的计算。可以通过以下步骤为按钮添加回调：

1. 点击 AddButton，在右侧属性面板中找到 ButtonPushedFcn 属性。
2. 点击右侧的加号，选择“创建函数”，MATLAB会自动生成一个回调函数模板。

以下是加法和减法按钮的回调函数示例：

% 加法按钮回调
function AddButtonPushed(app, event)
    num1 = str2double(app.Number1.Value);
    num2 = str2double(app.Number2.Value);
    
    if isnan(num1) || isnan(num2)
        app.ResultLabel.Text = '请输入有效的数字';
    else
        result = num1 + num2;
        app.ResultLabel.Text = ['结果：', num2str(result)];
    end
end

% 减法按钮回调
function SubtractButtonPushed(app, event)
    num1 = str2double(app.Number1.Value);
    num2 = str2double(app.Number2.Value);
    
    if isnan(num1) || isnan(num2)
        app.ResultLabel.Text = '请输入有效的数字';
    else
        result = num1 - num2;
        app.ResultLabel.Text = ['结果：', num2str(result)];
    end
end

运行应用

完成上述步骤后，您可以通过点击App Designer顶部的“运行”按钮来运行计算器应用。输入两个数字，点击加法或减法按钮，查看结果如何在标签中更新。

进一步的学习与资源

学习资料

以下是一些有助于您进一步学习MATLAB GUI设计的资源：

• MATLAB文档：
• MATLAB GUI文档提供了详细的函数和组件说明。
• 在线课程：
• 许多在线教育平台（如Coursera、edX）提供MATLAB的课程，涵盖从基础到进阶的各种主题。

社区与论坛

加入MATLAB社区可以帮助您获取额外的支持和灵感：

• MATLAB Central：
• 这是MATLAB用户的官方社区，您可以在这里提出问题、分享项目和获取代码示例。
• Stack Overflow：
• 在这个开发者社区中，您可以找到关于MATLAB的讨论和问题解答。

结语

MATLAB的图形用户界面（GUI）设计提供了一个强大的工具，使用户能够创建交互式应用程序。通过深入了解事件驱动编程、组件属性、布局管理及响应式设计，您可以创建功能丰富且用户友好的应用。

在这个入门教程中，我们展示了如何从零开始构建一个简单的计算器应用，并结合了代码示例和实际操作。希望您能从中获得启发，进一步探索MATLAB的更多功能与应用。随着实践的深入，您将能够构建更复杂、更具创意的MATLAB应用程序。