《Matlab App Designer设计入门及实战》课件 第5章 MATLAB App Designer设计基础及常用组件

第5章MATLABAppDesigner设计基础及常用组件本章要点MATLABAppDesigner设计工具是交互式开发环境，通过拖放可视化组件即可实现图形用户界面设计布局，还可以通过集成的编辑器快速为控件行为编程，整个设计过程分为两大任务：图形用户界面可视化组件布局和组件行为编程。MATLAB图形用户界面由一系列的组件组成，包括常用组件、容器组件、图窗工具组件和仪器组件等，本章主要介绍常用组件。用户以某种方式选择或激活组件，以最常用的激活方式鼠标单击为例，当按下鼠标按钮，标志着组件被选择或其他动作。MATLAB通过设置这些组件的回调函数，实现交互组件的鼠标或键盘事件与实现程序功能关联起来，进而完成特定交互式事件下的具体功能。本章要点：⑴MATLABAppDesigner设计基础及设计步骤。⑵回调函数的概念及创建。⑶基础设计工具。⑷常用组件。学习目标：⑴了解MATLABAppDesigner的设计原则和步骤。⑵掌握回调函数的内容及操作。⑶掌握基础设计工具使用方法。⑷掌握常用组件的创建及其回调操作。5.1MATLABAppDesigner界面及设计步骤5.1.1界面介绍MATLABAppDesigner设计工具是原有GUIDE开发环境的替代工具。MATLABAppDesigner是一个功能丰富的开发环境，它提供设计视图和代码视图、完整集成的MATLAB编辑器版本、一整套标准用户界面组件，以及用于创建控制面板和人机交互界面的仪表、旋钮、开关和指示灯。MATLABAppDesigner的打开方式有以下两种。

（1）命令方式。

在命令行窗口输入调用如下语句，即可打开设计环境。

appdesigner

（2）菜单方式。

打开MATLAB的主窗，选择新建菜单项，选择其中App命令，如图5-1所示，即可打开设计环境。图5-1通过主页打开方式5.1MATLABAppDesigner界面及设计步骤5.1.1界面介绍或通过单击MATLAB菜单栏的App菜单，选择设计App来创建，如图5-2所示。图5-2通过菜单栏打开方式5.1MATLABAppDesigner界面及设计步骤5.1.1界面介绍图5-3设计视图下的设计环境

在App设计模板中选中一个模板，单击“确定”按钮，就会显示App设计窗口，选择不同的App设计模板，会出现不同的显示效果。

其设计环境的【设计视图】显示，如图5-3所示。分别由左侧的【组件库】、中部的【界面编辑区（画布）】、右侧【组件浏览器】组成。5.1MATLABAppDesigner界面及设计步骤5.1.1界面介绍图5-4代码视图下的设计环境

选择【代码视图】，则切换到代码视图模式，如图5-4所示。分别由左侧的【代码浏览器】部分和【App的布局】部分、中部的【代码编辑区】、右侧的【组件浏览器】组成。5.1MATLABAppDesigner界面及设计步骤5.1.2设计步骤为了让大家更好地掌握MATLABAppDesigner的设计原则，先带领大家设计一个简单的App界面。

【例

5-1】用户输入的矩形的宽和长，单击按钮得到矩形的面积。

首先，通过在【组件库】选择合适的组件，添加到中间的【界面编辑区】，共添加3个编辑字段（数字）和1个按钮，如图5-5所示。图5-5计算矩形面积组件添加5.1MATLABAppDesigner界面及设计步骤5.1.2设计步骤

然后，通过在【界面编辑区】双击组件，修改组件的显示名称。或者在【组件浏览器】上部分选择画布中相应的组件，在下方相应显示出不同组件的属性表，通过修改相关属性修改显示名称，即可得到如图5-6所示的静态界面。图5-6计算矩形面积静态界面5.1MATLABAppDesigner界面及设计步骤5.1.2设计步骤通过菜单栏【画布】中的对齐、排列、间距的调整，使界面更加美观，如图5-7所示。图5-7调整对齐、排列、间距的界面面5.1MATLABAppDesigner界面及设计步骤5.1.2设计步骤为了更好地在程序中调用不同的组件，可在【组件浏览器】上半部分的上下文菜单，右击显示组件重命名操作，如图5-8所示。图5-8组件重命名5.1MATLABAppDesigner界面及设计步骤5.1.2设计步骤

最后，在静态界面的基础上使其能够实现通过用户输入的矩形的宽和长，来计算矩形的面积的功能，即编写界面实现动态功能的程序。

该界面的具体思路为：当用户输入矩形长和宽后，点击计算按钮，即可在矩形面积位置显示计算结果。那么，当用户点击按钮时，应动态地实现提取上方两个编辑框的数据相乘，并将相乘结果显示在下方的编辑框内。

所以在【组件浏览器】中找到【按钮】组件，右击选择【回调】如图5-9所示，再点击【转至jisuan_ButtonPushed回调】，设计环境自动跳转到【代码视图】，且光标自动定位于【按钮】组件的回调函数位置（回调函数在下一小节详细讲解），如图5-10所示。图5-9添加回调图5-10该界面的代码视图5.1MATLABAppDesigner界面及设计步骤5.1.2设计步骤按照设计思路在光标定位处，输入程序命令如下：k=app.kuan_EditField.Value;%调取kuan_EditField控件的Value，赋值给kc=app.chang_EditField.Value;%调取chang_EditField控件的Value，赋值给cm=k*c;app.mianji_EditField.Value=m;%将m的值赋值给mianji_EditField控件的Value属性输入界面如图5-11所示。图5-11程序编辑界面5.1MATLABAppDesigner界面及设计步骤5.1.2设计步骤

点击上方菜单栏的【运行】按钮，实现如图5-12所示界面，输入数据，点击计算按钮后，即可实现计算矩形面积的功能，如图5-13所示。图5-12运行界面

图5-13界面功能展示综上所述，界面制作包括界面设计和程序实现，具体步骤为：⑴分析界面所要实现的主要功能，明晰设计任务。⑵构思草图，并换位到用户角度审视草图。⑶将构思草图，利用组件搭建静态界面。⑷编写界面实现动态功能的程序，对功能进行仔细验证。5.2回调函数

回调函数是用户与App中的UI组件交互时执行的函数，每个回调函数都是一个子函数，每个图形对象类型不同，回调函数也不同，大多数组件都至少包含一个回调，但是，某些组件（如标签和信号灯）没有回调，因为这些组件仅用来显示信息。查看某个组件支持的回调的列表，可通过单击【组件浏览器】中的【回调】选项卡查看，如图5-14所示。图5-14回调列表5.2回调函数

创建UI组件的回调方法有很多，可根据不同的使用习惯实现。⑴右击【界面编辑区】的组件，选择【回调】，再选择【添加xx回调】，参考上述例5-1方法。⑵在【组件浏览器】中选择【回调】选项卡，将会显示受支持的回调列表，通过单击旁边向下的三角形，可添加默认名称的回调，如图5-15所示。如果已有现有回调，则下拉列表中会包含这些回调，如图5-16所示。图5-15默认名称添加回调

图5-16现有回调5.2.1创建回调函数5.2回调函数在【代码视图】中，在【编辑器】选项卡中单击【回调】图表，弹出如图5-17所示对话框图5-17代码视图添加回调5.2.1创建回调函数

组件：选择执行回调的组件。

回调：用于指定回调属性。回调属性将回调函数映射到特定交互，某些组件具有多个可用的回调属性，例如，滑块具有两个回调属性，分别为ValueChangeFcn和ValueChangeingFcn两个回调属性。

名称：为回调函数指定名称，MATLABAppDesigner提供默认名称，也可更改名称。5.2回调函数

搜索回调，可在【代码浏览器】中的【回调】选项卡顶部的搜索栏搜索，可通过右击选择【转至】，即可将光标自动跳转到可编辑的回调函数中，如图5-18所示。

删除回调，可在【代码浏览器】中的【回调】选项卡下，选择回调函数，右击选择【删除】，即可删除回调，如图5-19所示。图5-18搜索回调

图5-19删除回调5.2.2搜索回调和删除回调

5.3基础设计工具MATLABAppDesigner基础设计工具包括：对齐工具、排列工具、间距工具、组件检查器和组件浏览器等。5.3.1对齐、排列和间距工具

利用调整工具，如图5-20所示，可以对MATLABAppDesigner对象设计区内的多个对象的位置进行调整，使界面更加美观。调整工具包括：对齐工具、排列工具和间距工具。图5-20对齐、排列和间距工具5.3基础设计工具5.3.1对齐、排列和间距工具

对齐工具栏中，从左到右，从上到下，分别为左对齐、居中对齐、右对齐、顶端对齐、中间对齐和底端对齐。当选中两个或两个以上组件时，可以使用该功能进行位置调整。

排列工具栏中，从左到右分别为相同大小、组合和重新排序工具。当选中两个或两个以上组件时，选择相同大小工具中的宽度和高度、宽度或高度，如图5-21所示，可将选中组件的相应尺寸统一。选择组合工具，可将多个组件组合，即可作为整体同时移动、删除和复制操作。选中某个组件，选择重新排序，可选择置于顶层、上移一层、下移一层和置于底层选项，如图5-22所示。图5-21相同大小工具

图5-22重新排序工具

间距工具栏中，当选中两个或两个以上组件时，可实现水平或垂直方向的等间距调整。5.3基础设计工具5.3.2组件检查器

组件检查器，可以用于查看、修改和设置每个组件的属性值。当选中某个组件时，左侧会自动出现相应的属性列表，例如按钮组件的属性列表，将Text属性值改为“开始”，如图5-23所示。图5-23按钮属性列表5.3基础设计工具5.3.3组件浏览器

组件浏览器用于查看当前设计阶段的各个组件。例如，添加一个按钮组件到界面编辑区，组件的名称自动显示在组件浏览器中，如图5-24所示。可以在界面编辑区或组件浏览器中选择组件，系统将会自动在组件浏览器和界面编辑器中同时选中组件。

当某些组件（例如滑块组件）拖到界面编辑区时，系统会自动添加标签。如果组件具有标签，并且更改了标签文本（非数字的英文），则组件浏览器中组件的名称也将与该文本匹配，如图5-25所示，也可以通过右击选中组件名称，进行重命名。图5-24组件浏览器列表

图5-25组件浏览器组件名称

5.4常用组件MATLABAppDesigner共有常用组件21个，如表5-1所示为常用组件的名称及功能。表5-1常用组件功能表名称功能HTML将HTML、JavaScript或CSS嵌入MATLABAppDesigner下拉框也称为下拉列表，定义一系列可供选择的字符串切换按钮组用于管理一组互斥的切换按钮的容器列表框定义一系列可供选择的字符串，用于显示选项列表单选按钮组用于管理一组互斥的单选按钮的容器图像用于显示图片的组件坐标区用于显示图形和图像复选框用于在两种选项状态之间切换微调器从一个有限集合中选择数值按钮执行某种预定的功能或操作文本区域用于输入多行文本的组件日期选择器允许用户从交互式日历中选择日期标签用于显示静态文本树用于表示层次结构中的项目列表树（复选框）用于表示层次结构中的复选框选项滑块可滑动选择指定范围的数量值状态按钮指示一种二进制开关状态（开或关）编辑字段（数值）用于输入数值的组件编辑字段（文本）用于输入文本的组件表用于显示数据的行和列超链接用于创建超链接的组件5.4常用组件

按钮，又称命令按钮，主要用于响应单击事件的交互组件。按钮是长方形组件，常常在组件本身标有文本，单击按钮，执行由回调字符串所定义的动作。

在默认情况下，按钮处于上凸的弹起状态，当单击按钮，按钮处于下凹的状态，当用户松开鼠标后，按钮恢复到上凸状态。5.4.1按钮5.4常用组件5.4.1按钮【例5-2】创建一个抽取随机数界面。创建一个编辑字段（数值）和一个按钮，按钮文本标签设置为“抽取”，字体设置为14号黑体加粗，按键颜色为蓝色，编辑字段标签为“随机数”。单击“抽取”按钮，即在编辑字段中显示1到10之间的任意一个数。

第一步：设置布局和属性添加编辑字段（数值）和按钮组件，其中，按钮组件属性表修改如图5-26所示。静态界面设计如图5-27所示。

图5-26界面设计

图5-27按钮属性修改5.4常用组件5.4.1按钮

第二步：添加回调

右击按钮组件，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：R=randi(10);

%随机抽取1到10的任意一个数，赋值给Rapp.EditField.Value=R;单击【运行】按钮，运行结果，如图5-28所示。单击【抽取】按钮，执行结果如图5-29所示。

图5-28运行结果

图5-29执行结果

5.4常用组件5.4.1按钮【例5-3】创建一个按钮，单击按钮，弹出一个提示窗口。第一步：添加按钮组件，放置于空白处。第二步：右击按钮组件，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：msgbox('Welcome')运行结果，如图5-30所示。单击【请单击】按钮，执行结果如图5-31所示。

图5-30运行结果

图5-31执行结果

5.4常用组件5.4.2标签

文本标签是显示固定字符串的标签区域，也可作为其他组件提供功能解释和使用说明，主要作用是提示功能。

【例5-4】创建登录界面，共有2个界面。主界面：包含两个按钮，分别是登录和关闭按钮。当单击登录按钮时，关闭当前界面，并打开欢迎界面；当单击关闭按钮，关闭主界面。

第一步：设计主界面，添加登录按钮和关闭按钮。设计欢迎界面，添加“您已进入登录界面”标签，并修改标签的字体、字号和颜色属性，如图5-32所示。

图5-32添加标签组件

5.4常用组件5.4.2标签第二步：右击【关闭】按钮，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：delete(app.UIFigure);右击【登录】按钮，添加回调，输入程序命令如下：delete(app.UIFigure);runwelcome.mlapp%打开welcom.mlapp界面运行结果，如图5-33所示。单击【登录】按钮，执行结果如图5-34所示。

图5-33运行界面

图5-34单击登录按钮

5.4常用组件5.4.3坐标区坐标区组件是常用来显示图像或者图形的坐标轴，在MATLABAppDesigner中，可以设置一个或者多个坐标区。【例5-5】添加一个坐标区和两个按钮。单击绘图按钮，坐标区绘制正弦函数图形，单击清空按钮，清空坐标轴图形。第一步：添加1个坐标区组件和2个按钮组件。第二步：右击【绘图】按钮，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：

x=0:0.1:2*pi;y=sin(x);plot(app.UIAxes,x,y);xlabel(app.UIAxes,{'x'},'FontSize',9,'FontWeight','bold');ylabel(app.UIAxes,{'y=sinx'},'FontSize',9,'FontWeight','bold');title(app.UIAxes,{'正弦函数图像'},'FontSize',14,'color','r','FontWeight','bold')5.4常用组件5.4.3坐标区右击【清空】按钮，添加回调，输入程序命令如下：

cla(app.UIAxes);reset(app.UIAxes);运行结果界面，单击【绘图】按钮，如图5-35所示。单击【清空】按钮，执行结果如图5-36所示。

图5-35单击绘图按钮

图5-36单击清空按钮5.4常用组件5.4.3坐标区

坐标区组件有两个属性可以确定是否响应单击，以及如何响应单击。⑴PickableParts：确定对象是否捕获单击；⑵HitTest：确定对象是否响应单击或将其传递给最近的父级。坐标区组件组合使用PickableParts属性和HitTest属性可以实现以下几种情况：⑴被单击的对象捕获单击，并执行按钮按下回调或调用上下文菜单响应；⑵被单击的对象捕获单击，并将单击传递给它的一个父级，该父级执行按下按钮回调或调用上下文菜单响应；⑶被单击的对象捕获单击，单击可能由被单击对象背后的对象捕获。5.4常用组件5.4.3坐标区【例5-6】创建一个坐标区组件，绘制曲线。第一步：设置布局及属性添加一个坐标区组件，并将Title.String改为：\color[rgb]{0,0,1}y=2e^{-0.5x}sin(2{\pi}x)曲线、XLable.String改为：\color[rgb]{0,0,1}x、YLable.String改为：\color[rgb]{0,0,1}y，如图5-37所示。PickableParts属性设置为visible，HitTest属性设置为on，如图5-38所示。图5-37设置布局及属性

图5-38PickableParts和HitTest属性设置

5.4常用组件5.4.3坐标区第二步：右击坐标区组件，选择【回调】，选择【添加qu_UIAxesButtonDown回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：x=0:pi/100:2*pi;y=2*exp(-0.5*x).*sin(2*pi*x);plot(app.qu_UIAxes,x,y)运行结果界面，单击坐标区组件，执行结果如图5-39所示。图5-39坐标区组件运行界面

5.4常用组件5.4.4编辑字段（数值、文本）

编辑字段分为数值编辑字段和文本编辑字段两种，可供用户动态地输入数字或文本，其中，编辑字段（数值）只能输入数字。

可编辑字段可供用户输入字符串，并在回调中获取用户所输数据，或者用于显示运行结果。【例5-7】根据用户输入的三角函数名称、振幅、频率和初相，绘制出对应的三角函数曲线图形。第一步：设置布局及属性添加1个坐标区、1个按钮、3个编辑字段（数值）和1个编辑字段（文本）。其中，3个编辑字段（数值）用于用户输入振幅、频率和初相，编辑字段（文本）用于用户输入三角函数名称。界面布局如图5-40所示。图5-40界面布局

5.4常用组件5.4.4编辑字段（数值、文本）

分析：当单击【绘图】按钮，通过获取用户输入的【三角函数名称】确定一种运算，并获取用户输入的【振幅】、【频率】和【相位】数据，将图形绘制于坐标区组件。

第二步：右击【绘图】按钮，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：

x=0:0.01:2*pi;san=app.san_EditField.Value;A=app.A_EditField.Value;W=app.W_EditField.Value;Q=app.Q_EditField.Value;switchapp.san_EditField.Value

case'sin'

y=A*sin(W*x+Q);

plot(app.UIAxes,x,y);

title(app.UIAxes,{'正弦函数图像'});

case'cos'

y=A*cos(W*x+Q);

plot(app.UIAxes,x,y);

title(app.UIAxes,{'余弦函数图像'});

case'tan'

y=A*tan(W*x+Q);

plot(app.UIAxes,x,y);

title(app.UIAxes,{'正切函数图像'});

otherwise

msgbox('请正确输入三角函数名称')end5.4常用组件5.4.4编辑字段（数值、文本）

运行并在编辑字段组件输入相应内容，单击【绘图】按钮，如图5-41所示。图5-41执行结果界面

5.4常用组件5.4.4编辑字段（数值、文本）

当用户在编辑字段（数值）组件输入非数值，提示“值必须为数值”，如图5-42所示。当用户输入三角函数名称错误，弹出提示对话框，如图5-43所示。图5-42编辑字段（数值）

图5-43提示对话框

编辑字段（数值、文本）也可用于显示运行结果，显示数据或文本。5.4常用组件5.4.4编辑字段（数值、文本）

【例5-8】设计一个简易BMI计算。获取用户身高和体重，计算BMI值，并根据中国标准显示胖瘦程度。

第一步：设置布局及属性

添加3个编辑字段（数值）、1个编辑字段（文本）、1个按钮和1个标签，如图5-44所示。图5-44BMI界面设计

5.4常用组件5.4.4编辑字段（数值、文本）第二步：获取用户输入的身高和体重信息，计算BMI数值，并通过BMI数值范围确定肥胖程度。右击【计算】按钮，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：

h=app.height_EditField.Value;w=app.weight_EditField.Value;app.BMI_EditField.Value=w/(h*h);ifapp.BMI_EditField.Value<=18.5

app.EditField.Value='偏瘦'elseif(18.5<app.BMI_EditField.Value)&&(app.BMI_EditField.Value<=23.9)

app.EditField.Value='正常'elseif(23.9<app.BMI_EditField.Value)&&(app.BMI_EditField.Value<=27.9)

app.EditField.Value='偏胖'elseif(27.9<app.BMI_EditField.Value)&&(app.BMI_EditField.Value<=40)

app.EditField.Value='肥胖'else

app.EditField.Value='极重度肥胖'end5.4常用组件5.4.4编辑字段（数值、文本）运行并输入身高体重数值，单击【计算】按钮，运行结果如图5-45所示。图5-45BMI计算结果

5.4常用组件5.4.5单选按钮组

单选按钮组是用于管理一组互斥的单选按钮的容器，可通过属性控制单选按钮组组件的外观和行为。

旧版本的MATLAB中，按钮组是GUI对象的容器，当按钮组的对象为单选按钮或切换按钮对象时，会对子对象本身也定义了Callback函数。新版本的MATLAB中，按钮组进行了优化，单独设置了单选按钮组和切换按钮组组件，并且其管理的单选按钮和切换按钮对象不能再创建Callback回调函数

5.4常用组件5.4.5单选按钮组

【例5-9】单选按钮实例。要求将用户按钮组所选择的内容，显示到编辑字段组件。第一步：设置布局及属性添加1个编辑字段（数值）和1个单选按钮组，并在单选按钮组中添加到5个选项。第二步：右击单选按钮组组件，选择【回调】，选择【转至ButtonGroupSelectionChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：

selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Text

case'20'

app.EditField.Value='20';

case'30'

app.EditField.Value='30';

case'40'

app.EditField.Value='40';

case'50'

app.EditField.Value='50';

case'其他'

app.EditField.Value='其他';end5.4常用组件5.4.5单选按钮组运行并选择“50”选项，运行结果如图5-46所示。图5-46按钮选项组组件运行界面5.4常用组件5.4.5单选按钮组【例5-10】用单选按钮组实现二进制与十进制数之间的转换。第一步：设置布局及属性添加2个编辑字段（数值）和1个单选按钮组，在单选按钮组中可选择二进制转十进制或十进制转二进制。第二步：右击单选按钮组组件，选择【回调】，选择【转至ButtonGroupSelectionChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;str=app.yuan_EditField.Value;switchselectedButton.Text

case'二进制转十进制'

app.jieguo_EditField.Value=bin2dec(num2str(str));

case'十进制转二进制'

app.jieguo_EditField.Value=str2double(dec2bin(str,24));end5.4常用组件5.4.5单选按钮组运行输入数据并选择“二进制转十进制”选项，运行结果如图5-47所示。输入数据并选择“十进制转二进制”选项，运行结果如图5-48所示。图5-47二进制转十进制

图5-48十进制转二进制

5.4常用组件5.4.5单选按钮组【例5-11】用单选按钮组实现对坐标区内曲线的颜色进行选择。第一步：设置布局及属性添加1个坐标区和1个单选按钮组，在单选按钮组中设置黄色、红色和蓝色选项。第二步：右击单选按钮组组件，选择【回调】，选择【转至ButtonGroupSelectionChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;x=0:0.1:2*pi;y=sin(x);hp=plot(app.UIAxes,x,y,'LineWidth',2);switchselectedButton.Textcase'黄色'set(hp,'color','y');case'红色'set(hp,'color','r');case'蓝色'set(hp,'color','b');end5.4常用组件5.4.5单选按钮组运行后选择“红色”单选按钮，运行结果如图5-49所示。图5-49线形选择界面5.4常用组件5.4.6切换按钮组

切换按钮组与单选按钮组相似，是用于管理一组互斥的切换按钮的容器，可通过属性控制单选按钮组组件的外观和行为。

【例5-12】添加切换按钮组，实现当用户点击切换按钮时，切换按钮组的标题也相应发生改变。

第一步：设置布局及属性。添加1个切换按钮组，按钮名称为1、2和3。界面布局如图5-50(a)所示。

第二步：右击切换按钮组组件，选择【回调】，选择【转至ButtonGroupSelectionChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Textcase'1'

app.ButtonGroup.Title="您选择的数字是："+selectedButton.Textcase'2'app.ButtonGroup.Title="您选择的数字是："+selectedButton.Textcase'3'app.ButtonGroup.Title="您选择的数字是："+selectedButton.Textend5.4常用组件5.4.6切换按钮组运行后分别单击“1”切换按钮和“3”切换按钮，运行结果如图5-50(b)和5-50(c)所示。

(a)界面布局

(b)选择数字1(c)选择数字3

图5-50例5-12运行结果5.4常用组件5.4.6切换按钮组【例5-13】实现通过单选按钮组和切换按钮组组件。切换坐标区曲线的颜色、线型和图形类型的界面。第一步：设置布局及属性。添加2个切换按钮组，实现颜色和线型的切换；添加1个单选按钮组，实现不同函数的切换；添加1个按钮实现绘图操作。界面布局如图5-51所示。第二步：右击【绘图】按钮组件，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：selectedButton1=app.ButtonGroup.SelectedObject;selectedButton2=app.ButtonGroup_2.SelectedObject;selectedButton3=app.ButtonGroup_3.SelectedObject;switchselectedButton1.Text%第一个切换按钮组，选择颜色case'蓝色'co='b';case'绿色'co='g';case'红色'co='r';endswitchselectedButton2.Text%第一个切换按钮组，选择线型case'粗'wi=3;case'中等'wi=2;case'细'wi=1;endswitchselectedButton3.Text%单选按钮组，选择函数类型case'正弦'x=0:0.1:2*pi;y=sin(x);plot(app.UIAxes,x,y,'color',co,'LineWidth',wi);case'余弦'x=0:0.1:2*pi;y=cos(x);plot(app.UIAxes,x,y,'color',co,'LineWidth',wi);case'正切'x=0:0.1:2*pi;y=tan(x);plot(app.UIAxes,x,y,'color',co,'LineWidth',wi);end5.4常用组件5.4.6切换按钮组运行后分别选择颜色、线型和函数类型后，单击【绘图】按钮，运行结果如图5-52所示。

图5-51界面布局图

图5-52运行结果5.4常用组件5.4.7下拉框【例5-14】通过下拉框选择不同菜品，并显示相应菜品简介。第一步：设置布局及属性。添加1个下拉框，1个标签。第二步：右击下拉框组件，选择【回调】，选择【添加DropDownValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：value=app.DropDown.Value;switchvaluecase'糖醋里脊'app.Label_2.Text={'配料：里脊肉，食用油，鸡蛋，香葱，生姜，面粉，淀粉。''口感：甜酸可口，外焦里嫩，口齿留香，回味无穷。'};case'麻婆豆腐'app.Label_2.Text={'配料：豆腐、肉末、辣椒、花椒、豆豉、豆瓣酱、花椒粉、盐''口感：麻、辣、鲜、香、烫、嫩、酥'};case'油焖大虾'app.Label_2.Text={'鲜大虾、料酒，荆沙辣酱，白糖，花椒油，青蒜段，姜丝''口感：麻辣爽口、口味鲜香'};end5.4常用组件5.4.6切换按钮组运行后分别选择“糖醋里脊”和“油焖大虾”，运行结果如图5-53所示。

图5-53下拉框案例5.4常用组件5.4.7下拉框【例5-15】下拉框选择圆形、矩形或三角形，用户通过弹出对话框输入参数，计算出相应图形的面积。第一步：设置布局及属性。添加1个下拉框。界面布局如图5-54所示。图5-54界面布局

第二步：右击下拉框组件，选择【回调】，选择【添加DropDownValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：5.4常用组件5.4.7下拉框value=app.DropDown.Value;switchvaluecase'圆形'r=inputdlg('请输入半径(cm)：','圆形面积');s1=num2str(str2double(r)*str2double(r)*3.14);msgbox(strcat('计算的面积为：',s1),'计算结果');case'矩形'a=inputdlg('请输入矩形长(cm)：','矩形面积');b=inputdlg('请输入矩形宽(cm)：','矩形面积');s2=num2str(str2double(a)*str2double(b));msgbox(strcat('计算的面积为：',s2),'计算结果');case'三角形'd=inputdlg('请输入三角形的底边(cm)：','三角形面积');h=inputdlg('请输入三角形的高(cm)：','三角形面积');s3=num2str((str2double(d)*str2double(h))*0.5);msgbox(strcat('计算的面积为：',s3),'计算结果');end5.4常用组件5.4.7下拉框

运行后以选择“矩形”为例，弹出如图5-55(a)对话框，输入矩形的长，单击确定按钮，继续弹出如图5-55(b)所示对话框，输入矩形的宽，单击确定，最后，弹出结果对话框，如图5-55(c)所示。(a)矩形的长

(b)矩形的宽

(c)矩形的面积

图5-55计算面积运行界面5.4常用组件5.4.8列表框

【例5-16】在坐标区绘制正弦曲线，并利用单选按钮组选择线型，列表框选择坐标区线宽和图形颜色。第一步：设置布局及属性。添加1个坐标区，1个单选按钮组，2个列表框。第二步：右击单选按钮组件，选择【回调】，选择【转至ButtonGroupSelectionChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Text

case'实线'

app.UIAxes.GridLineStyle='-';

case'虚线'

app.UIAxes.GridLineStyle=':';

end5.4常用组件5.4.8列表框

右击第一个列表框组件，选择【回调】，选择【转至ListBoxValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：value=app.ListBox.Value;x=0:0.1:4*pi;y=sin(x);switchvaluecase'黄色'plot(app.UIAxes,x,y,'color','y','LineWidth',2);case'红色'plot(app.UIAxes,x,y,'color','r','LineWidth',2);case'绿色'plot(app.UIAxes,x,y,'color','g','LineWidth',2);case'蓝色'plot(app.UIAxes,x,y,'color','b','LineWidth',2);end5.4常用组件5.4.8列表框右击第二个列表框组件，选择【回调】，选择【转至ListBox_2ValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：value=app.ListBox_2.Value;switchvaluecase'宽'app.UIAxes.LineWidth=2;case'中等'app.UIAxes.LineWidth=1;case'窄'app.UIAxes.LineWidth=0.5;end5.4常用组件5.4.8列表框运行后分别对网格线型、坐标区线宽和图形颜色进行调整，运行结果如图5-56所示。图5-56列表框案例5.4常用组件5.4.8列表框【例5-17】将指定路径文件夹下的所有.jpg格式图片导入到列表框，并将选中的图片显示出来。第一步：设置布局及属性。添加1个坐标区，1个列表框，1个按钮。界面布局如图5-57所示。第二步：右击【获取图像】按钮组件，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：globalFilePathFilePath=uigetdir('*.*','请选择文件夹');jpg_list=dir(strcat(FilePath,'\*.jpg'));jpg_num=length(jpg_list);ifjpg_num>0forj=1:jpg_nums=jpg_list(j).name;app.ListBox.Items=[app.ListBox.Items,num2str(s)];%列表框动态赋值endend5.4常用组件5.4.8列表框右击列表框组件，选择【回调】，选择【转至ListBoxValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：value=app.ListBox.Value;globalFilePathimage=[FilePath,'\',value];I=imread(image);

%读取图片imshow(I,'parent',app.UIAxes);%显示图片到坐标轴

运行界面，单击【获取图像】按钮，弹出对话框查找如图5-58所示文件夹，单击该文件夹，列表框内即可显示文件夹内全部的.jpg格式图片名称，如图5-59所示。选择其中一个选项，即可将相应图片显示在坐标区内，如图5-60所示。5.4常用组件5.4.8列表框图5-57界面布局

图5-58文件夹内图片图5-59列表框获取图片信息

图5-60显示图像5.4常用组件5.4.9复选框【例5-18】通过复选框控制坐标区的X轴和Y轴网格线是否显示。第一步：设置布局及属性。添加1个坐标区，2个复选框。第二步：右击第一个复选框组件，选择【回调】，选择【添加XCheckBoxValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：value=app.XCheckBox.Value;ifvalueapp.UIAxes.XGrid='on';elseapp.UIAxes.XGrid='off';end

右击第二个复选框组件，选择【回调】，选择【添加XCheckBoxValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：5.4常用组件5.4.9复选框value=app.YCheckBox.Value;ifvalueapp.UIAxes.YGrid='on';elseapp.UIAxes.YGrid='off';end运行界面，选择复选框选项，坐标区网格发生相应变化，如图5-61所示。图5-61复选框调整网格线5.4常用组件5.4.9复选框【例5-19】通过下拉框选择是否通过英语等级考试，若未通过，则复选框被禁用，若通过，则从复选框内选择相应英语等级考试。第一步：设置布局及属性。添加1个下拉框，1个复选框。第二步：右击下拉框组件，选择【回调】，选择【添加DropDownValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：value=app.DropDown.Value;switchvaluecase'是'app.CheckBox.Enable='on';app.CheckBox_2.Enable='on';case'否'app.CheckBox.Enable='off';app.CheckBox_2.Enable='off';end5.4常用组件5.4.9复选框

运行界面，下拉框选择“否”，复选框禁用，如图5-62所示。下拉框选择“是”，并选择“四级”复选框，如图5-63所示。

图5-62选择“是”结果

图5-63选择“否”界面5.4常用组件5.4.10树及树（复选框）【例5-20】利用树组件实现菜单及旅游景点列表，当点击列表中某个选项，在文本区域组件显示相应的内容。第一步：设置布局及属性。添加1个树组件，1个文本区域。界面布局如图5-64所示。第二步：右击树组件，选择【回调】，选择【添加TreeSelectioneChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：图5-64界面布局设计5.4常用组件5.4.10树及树（复选框）selectedNodes=app.Tree.SelectedNodes;switchselectedNodes.Textcase'糖醋里脊'app.TextArea.Value={'配料：里脊肉，食用油，鸡蛋，香葱，生姜，面粉，淀粉。''口感：甜酸可口，外焦里嫩，口齿留香，回味无穷。'};case'麻婆豆腐'app.TextArea.Value={'配料：豆腐、肉末、辣椒、花椒、豆豉、豆瓣酱、花椒粉、盐''口感：麻、辣、鲜、香、烫、嫩、酥'};case'油焖大虾'app.TextArea.Value={'鲜大虾、料酒，荆沙辣酱，白糖，花椒油，青蒜段，姜丝''口感：麻辣爽口、口味鲜香'};case'长城'app.TextArea.Value={'长城'};case'兵马俑'app.TextArea.Value={'兵马俑'};case'故宫'app.TextArea.Value={'故宫'};end5.4常用组件5.4.10树及树（复选框）运行界面，选择“麻婆豆腐”，运行结果如图5-65所示。图5-65运行界面结果5.4常用组件5.4.10树及树（复选框）selectedNodes=app.Tree.SelectedNodes;switchselectedNodes.Textcase'鲁菜'app.TextArea.Value=['鲁菜，鲜香脆嫩、突出原味、'...'咸鲜为主'];case'川菜'app.TextArea.Value=['川菜，取材广泛，调味多变，'...'菜式多样，口味清鲜，醇浓并重'];case'粤菜'app.TextArea.Value=['粤菜，注重质和味，口味比较'...'清淡，力求清中鲜、淡中求美'];case'湘菜'app.TextArea.Value=['湘菜，制作精细，用料上比较'...'广泛，口味多变，品种繁多'];end【例5-21】通过树（复选框）选择不同菜系，并在文本区域组件显示菜系简介。第一步：设置布局及属性。添加1个树（复选框），1个文本区域。第二步：右击树（复选框）组件，选择【回调】，选择【添加TreeSelectioneChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：5.4常用组件5.4.10树及树（复选框）运行界面，先选择“鲁菜”，再选择“川菜”，运行结果如图5-66所示。图5-66树（复选框）案例5.4常用组件5.4.11表data=readtable("C:\Users\lxy\Desktop\Data.xlsx");app.UITable.Data=data;VariableDescriptions=data.Properties.VariableDescriptions;app.UITable.ColumnName=data.Properties.VariableNames%给ColumnName复制【例5-22】通过按钮获取Excel表格的内容，并显示在表组件。第一步：设置布局及属性。添加1个表，1个按钮。界面布局如图5-67所示。第二步：右击按钮组件，选择【回调】，选择【添加ButtonPushedFcn回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：5.4常用组件5.4.11表运行界面，单击【读取表格内容】按钮，如图5-68所示。

图5-67表案例页面布局

图5-68表组件运行结果5.4常用组件5.4.11表properties(Access=private)troperty%Descriptionmoused_ind;moused_ind2;NewData;end【例5-23】通过按钮对表组件的内容进行增加和删除。第一步：设置布局及属性。添加1个表，2个按钮，表组件的ColumnEditable属性设置为“true”。第二步：点击【属性】，选择【私有属性】，如图5-69所示。界面自动跳转到代码视图，在光标定位处，输入程序命令如下：5.4常用组件5.4.11表app.t=app.UITable.Data;nr={[],[],[]};%1行3列的空白数据app.UITable.Data=[app.t;nr];%将空白数据添加到表中app.t=app.UITable.Data;newData1=app.t;set(app.UITable,'Data',newData1);右击【增加】按钮组件，选择【回调】，选择【添加ButtonPushed回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：此时，运行界面，单击【增加】按钮即可增加一行空白数据，并且是可编辑状态。若想实现删除功能，前提是能够获取鼠标在表组件中的位置。即右击表组件，选择【回调】，选择【添加UITableCellSelection回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：indices=event.Indices;indices=event.Indices;app.moused_ind=indices(1);app.moused_ind2=indices(2);5.4常用组件5.4.11表app.UITable.Data(app.moused_ind,:)=[];app.t=app.UITable.Data;右击【删除】按钮组件，选择【回调】，选择【添加Button_2Pushed回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：运行界面，单击【增加】按钮并编辑内容，如图5-70所示。鼠标选择某一行数据并单击【删除】按钮，即可删除该行数据。

图5-69添加私有属性

图5-70增加并编辑数据界面5.4常用组件5.4.12滑块value=app.EditField.Value;app.Slider.Value=app.EditField.Value;【例5-24】实现滑块与编辑字段（数值）之间的数据传递，即移动滑块，相应数值即可显示在编辑字段（数值）上，在编辑字段（数值）上输入滑块范围内的数值，滑块指针自动移动。第一步：设置布局及属性。添加1个编辑字段（数值），1个滑块。第二步：右击编辑字段（数值）组件，选择【回调】，选择【添加EditFieldValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：右击滑块组件，选择【回调】，选择【添加SliderValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：value=app.Slider.Value;app.EditField.Value=app.Slider.Value;5.4常用组件5.4.12滑块运行界面，在编辑字段（数值）输入200，滑动条自动调整到相应位置，如图5-71所示。当移动滑动条位置，编辑字段（数值）自动显示相应数值，如图5-72所示。图5-71编辑字段（数值）输入数据

图5-72调整滑动条数值5.4常用组件5.4.12滑块value=app.EditField.Value;app.Slider.Value=app.EditField.Value;【例5-25】通过滑块选择振幅、角频率和初相位的数值，点击绘图按钮，在坐标区绘制相应参数的正弦函数曲线图像。第一步：设置布局及属性。添加3个滑块、3个编辑字段（数值）、1个按钮和1个坐标区。第二步：分别右击3个编辑字段（数值）组件，分别选择【回调】，选择【添加EditFieldValueChanged回调】，界面自动跳转到代码视图，在光标定位处，分别输入程序命令如下：第一条程序命令：第二条程序命令：value=app.EditField_2.Value;app.Slider_2.Value=app.EditField_2.Value;第三条程序命令：value=app.EditField_3.Value;app.EditField_3.Value=app.Slider_3.Value;5.4常用组件5.4.12滑块value=app.Slider.Value;app.EditField.Value=app.Slider.Value;分别右击滑块组件，分别选择【回调】，选择【添加SliderValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：第一条程序命令：第二条程序命令：value=app.Slider_2.Value;app.EditField_2.Value=app.Slider_2.Value;第三条程序命令：value=app.Slider_3.Value;app.EditField_3.Value=app.Slider_3.Value;5.4常用组件5.4.12滑块x=0:0.1:5*pi;a=app.Slider.Value;w=app.Slider_2.Value;q=app.Slider_3.Value;y=a*sin(w*x+q);plot(app.UIAxes,x,y);右击【绘图】按钮组件，选择【回调】，选择【添加ButtonPushed回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：

运行界面，滑动滑块选择振幅、角频率和初相位的数值，单击【绘图】按钮，即可在坐标区绘制相应参数的正弦函数曲线，如图5-73所示。：图5-73运行结果界面

注意：右击滑块，选择【回调】，当选择【添加SliderValueChanging回调】时，详见例6-4。5.4常用组件5.4.13微调器app.Slider.Value=app.Spinner.Value;%控制滑块显示数值app.Gauge.Value=app.Spinner.Value;%控制仪表显示数值【例5-26】通过微调器控制滑块和仪表组件的显示数值。第一步：设置布局及属性。添加1个微调器、1个滑块、1个仪表。第二步：右击微调器组件，选择【回调】，选择【添加SpinnerValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：运行界面，调整微调器数值，观察到滑块和仪表也发生相应变化，如图5-74所示。：图5-74微调器运行界面5.4常用组件5.4.13微调器a=app.Spinner.Value;selectedButton=app.ButtonGroup.SelectedObject;switchselectedButton.Textcase'红色'app.Lamp.Color=[a,0,0];case'绿色'app.Lamp.Color=[0,a,0];end【例5-27】实现通过单选按钮组选择灯的颜色，进而通过微调器调整灯的亮度。第一步：设置布局及属性。添加1个微调器、1个信号灯、1个单选按钮组。微调器的Limits属性调整为[0,1]，step属性调整为0.1。第二步：右击微调器组件，选择【回调】，选择【添加SpinnerValueChanged回调】，界面自动跳转到代码视图，在光标定位处，输入程序命令如下：5.4常用组件5.4.13微调器运行界面，在单选按钮组选择绿色，调整微调器数值，观察到信号灯组件颜色随着微调器数值的调整，亮度发生变化。当亮度值为0.4时，如图5-75所示。当亮度值为0.8时，如图5-76所示。

图5-75微调器调整信息灯亮度

图5-76微调器调整信息灯亮度5.4常用组件5.4.14状态按钮value=app.ONOFFButton.Value;ifvalueapp.Lamp.Color=[0,1,0];elseapp.Lamp.Color=[0,0,0]