MATLAB GUI设计全解-基于App Designer的实现方法 课件 第7章 App构建组件

组件概述

2App设计工具和UI图窗支持大量组件，各组件又对应相应的UI函数，通过这些组件可用于设计功能齐全的现代化应用程序，这些组件都可以通过编程方式使用，它们大致可以做如下分类。（1）容器和图窗工具：包括用于对组件分组的面板和选项卡，还包括菜单栏等。（2）坐标区：包括用于创建绘图以进行数据可视化和探查的坐标区等。（3）常用组件：包括响应交互的组件，如按钮、滑块、下拉列表和树等。（4）检测组件：包括用于可视化状态的仪表和信号灯，以及用于选择输入参数的旋钮和开关。

3（5）可扩展组件：包括创建的自定义UI组件。与第三方库对接以显示小组件或数据可视化等内容。（6）工具箱组件：包括工具箱的UI组件。使用这些组件时需要安装相应的工具箱。App设计工具组件库中提供了大多数UI组件，可以直接将它们拖放到画布上使用，操作非常方便。读者也可以使用编程方式向App（由App设计工具创建）添加组件库中不存在的组件，或将组件动态添加到正在运行的App中。提示：在App设计工具中调用图形函数的工作流与通常在MATLAB命令行中使用的工作流略有不同。用于开发基于uifigure的App函数这些函数大部分通过在App设计工具组件库中的组件实现

4

5

6

7

8

9

10

11

12感谢选用本书作为教材！★获取学习资源13常用组件

作者：刘浩

15学习目标按钮状态按钮下拉框按钮组列表框图像坐标区

16学习目标复选框微调器文本区域日期选择器标签树复选框树

学习目标滑块数值编辑字段文本编辑字段表超链接HTML

18按钮（Button）是一种UI组件，当按下鼠标左键并释放时，会作出响应。通过更改属性值可以修改按钮的外观和行为。该组件的按钮及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

19状态按钮（StateButton）是一种指示逻辑状态的组件。通过属性可以控制状态按钮的外观和行为。该组件的按钮及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

20下拉列表（DropDown，下拉框）是一种UI组件，允许用户选择选项或输入文本。通过属性可以控制下拉列表的外观和行为。该组件的下拉列表及回调属性组的属性参数相关取值如表所示，其余属性请参考帮助文件。

21按钮组（ButtonGroup）是用于管理一组互斥的单选按钮和切换按钮的容器。使用uibuttongroup函数可以创建一个按钮组。通过更改ButtonGroup对象的属性值，可以对其外观和行为进行某些方面的修改。该组件的标题及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。注意：ButtonGroup对象的某些属性和属性值会有所不同，具体取决于按钮组是使用uifigure函数还是figure函数创建的图窗的子级。uifigure函数是构建新App时推荐使用的函数，也是在使用App设计工具创建的App中使用的函数。

22列表框（ListBox）是一种UI组件，用于显示列表中的项目。通过属性可以控制列表框的外观和行为。该组件的列表框及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

23图像（Image）是允许用户显示图片的UI组件，如App中的图标或徽标。Image属性控制图像的外观和行为。该组件的图像及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

24坐标区（UIAxes）属性控制UIAxes对象的外观和行为。通过更改属性值，可以修改坐标区的特定方面。该组件的回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。注意：此处列出的属性对于App设计工具中的坐标区或使用uifigure函数创建的图窗中的坐标区有效。对于GUIDE中使用的坐标区，或通过figure函数创建的App中使用的坐标区。

25复选框（CheckBox）是一种UI组件，用于指示预设项或选项的状态。通过属性可以控制复选框的外观和行为。该组件的复选框及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

26微调器（Spinner）是一种UI组件，用于从一个有限集合中选择数值。可通过属性控制微调器的外观和行为。该组件的值及回调属性组的属性参数相关取值如表所示，其余属性请参考帮助文件。

27文本区域（TextArea）是用于输入多行文本的UI组件。通过属性可以控制文本区域的外观和行为。该组件的文本及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

28日期选择器（DatePicker）允许用户从交互式日历中选择日期。uidatepicker函数可以创建日期选择器并在显示它之前设置任何必需的属性。通过更改日期选择器的属性值，可以对其外观和行为进行某些方面的修改。该组件的日期选择器及回调属性组的属性参数相关取值如表所示，其余属性请参考帮助文件。

29标签（Label）是一种UI组件，其中包含用于标记App各部分的静态文本。通过属性可以控制标签的外观和行为。该组件的文本及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

30树（Tree）是指用来表示App层次结构中的项目列表的UI组件。通过属性可以控制树的外观和行为。该组件的节点及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

31复选框树（CheckBoxTree）是UI组件，用于显示App层次结构中的项目列表，其中每个项目都有一个关联的复选框。通过属性可以控制复选框树的外观和行为。该组件的节点及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

32滑块（Slider）是一种UI组件，允许用户沿某个连续范围选择一个值。通过属性可以控制滑块的外观和行为。该组件的滑块及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

33数值编辑字段（NumericEditField）是一种UI组件，允许用户在App中输入数值。通过属性可以控制数值编辑字段的外观和行为。该组件的值及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

34文本编辑字段（EditField）是用于输入文本的UI组件。通过属性可以控制编辑字段的外观和行为。该组件的文本及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

35表（Table）组件在App中显示数据的行和列。uitable函数创建一个表UI组件并在显示前为其设置所有必需的属性。通过更改Table对象的属性值，可以对其外观和行为进行某些方面的修改。该组件的列表框及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。Table对象的某些属性和属性值会有所不同，具体取决于表是使用uifigure函数还是figure函数创建的图窗的子级。uifigure函数是构建新App时推荐使用的函数，也是在使用App设计工具创建的App中使用的函数。

36

37超链接（Hyperlink）是提供能打开网页的可单击链接的UI组件。通过属性可以控制超链接的外观和行为。该组件的文本及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

38借助HTML组件，可以显示原始HTML文本，或将HTML、JavaScript或CSS内容嵌入到App，并与第三方库对接，以显示小组件或数据可视化等内容。说明：支持文件（HTML、JavaScript、CSS、图像等）必须保存在本地文件系统可以访问的位置。HTML属性控制着HTMLUI组件的外观和行为。该组件HTML属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。感谢选用本书作为教材！★获取学习资源39容器与图窗工具组件

作者：刘浩1234

41学习目标图窗网络布局管理器选项卡组面板567

菜单栏上下文菜单工具栏

42利用UI图窗（UIFigure）可以创建一个用于设计App的图窗。这是App设计工具使用的图窗类型。图窗是在App设计工具中或通过uifigure函数以编程方式构建App的容器。通过属性可以控制UI图窗的外观和行为。使用圆点表示法引用特定的对象和属性。UI图窗的窗口外观及回调属性组的属性参数及相关取值如表7-2所示，其余属性请参考帮助文件。

43

44利用网格布局管理器（GridLayout）可以沿一个不可见网格的行和列定位UI组件，该网格跨整个图窗或图窗中的一个容器。该组件的网格及回调属性组的属性参数及相关取值如表7-3所示

45说明：将组件添加到网格布局管理器时，不指定组件的Layout属性时，网格布局管理器会从左到右、从上到下添加组件。

46选项卡组（TabGroup）是用来对选项卡进行分组和管理的容器。使用uitabgroup函数创建一个选项卡组。通过更改TabGroup对象的属性值，可以对其外观和行为进行某些方面的修改。该组件的选项卡及回调属性组的属性参数及相关取值如表7-4所示，其余属性请参考帮助文件。TabGroup对象的某些属性和属性值会有所不同，这取决于选项卡组是使用uifigure函数还是figure函数创建的图窗的子级。uifigure函数是构建新App时推荐使用的函数，也是在使用App设计工具创建的App中使用的函数。

47

48面板（Panel）是用于将UI组件分组在一起的容器。使用uipanel函数创建一个面板。通过更改Panel对象的属性值，可以对其外观和行为进行某些方面的修改。Panel对象的某些属性和属性值会有所不同，这取决于面板是使用uifigure函数还是figure函数创建的图窗的子级。uifigure函数是构建新App时推荐使用的函数，也是在使用App设计工具创建的App中使用的函数。

49菜单（Menu）在App窗口顶部显示选项的下拉列表。调用uimenu函数创建一个菜单，或者在现有菜单中添加一个子菜单。通过属性可以控制菜单的外观和行为。Menu对象的某些属性会有所不同，这取决于菜单是使用uifigure函数还是figure函数创建的图窗的子级。uifigure函数是构建新App时推荐使用的函数，也是在使用App设计工具创建的App中使用的函数。

50

51上下文菜单（ContextMenu）是当右击图形对象或UI组件时出现的快捷菜单。使用uicontextmenu函数可以创建上下文菜单并设置属性。通过更改属性值，可以修改上下文菜单的外观和行为。使用uifigure或figure函数创建的图窗可以作为上下文菜单的父级。该组件的回调属性组的属性参数及相关取值如表7-7所示，其余属性请参考帮助文件。

52工具栏（Toolbar）是图窗窗口顶部的水平按钮列表的容器。uitoolbar函数在图窗中创建一个工具栏并在显示它之前设置任何必需属性。通过更改属性值，可以修改工具栏的外观和行为。感谢选用本书作为教材！★获取学习资源53仪器组件

作者：刘浩

55学习目标信号灯仪表90度仪表半圆形仪表线性仪表旋钮分档旋钮学习目标开关拨动开关跷板开关

57信号灯（Lamp）是通过颜色指示状态的App组件。通过属性可以控制信号灯的外观和行为。该组件的颜色及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

58仪表（Gauge）是表示测量仪器的App组件。通过属性可以控制仪表的外观和行为。该组件的仪表及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

59

6090度仪表（NinetyDegreeGauge）是表示测量仪器的UI组件。通过属性可以控制90度仪表的外观和行为。该组件的仪表及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

61半圆形仪表（SemicircularGauge）是表示测量仪器的UI组件。通过属性可以控制半圆形仪表的外观和行为。该组件的仪表及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

62线性仪表（LinearGauge）是表示测量仪器的UI组件。通过属性可以控制线性仪表的外观和行为。该组件的仪表及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

63旋钮（Knob）是表示仪器控制旋钮的一种UI组件，通过调节该按钮可以控制某个值。通过属性可以控制旋钮的外观和行为。该组件的旋钮及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

64

65分档旋钮（DiscreteKnob）是一种UI组件，用于从一组分档中选择一个选项。通过更改属性值，可以修改分档旋钮的外观和行为。该组件的旋钮及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

66开关（Switch）是一种指示逻辑状态的UI组件。通过属性可以控制开关的外观和行为。该组件的开关及回调属性组的属性参数及相关取值如表7-38所示，其余属性请参考帮助文件。

67

68拨动开关（ToggleSwitch）是一种指示逻辑状态的UI组件。通过属性可以控制拨动开关的外观和行为。该组件的开关及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。

69跷板开关（RockerSwitch）是一种指示逻辑状态的UI组件。通过属性可以控制跷板开关的外观和行为。该组件的开关及回调属性组的属性参数及相关取值如表所示，其余属性请参考帮助文件。感谢选用本书作为教材！★获取学习资源70以编程方式添加UI组件

作者：刘浩

72App设计工具组件库中提供了大多数UI组件，可以直接将它们拖放到画布上使用时。在某些时候可能需要在代码视图中以编程方式添加组件。（1）创建在组件库中未提供的组件。如用于显示某对话框的App必须调用适当的函数来显示该对话框。（2）根据运行时条件动态创建组件。注意：当以编程方式添加UI组件时，必须调用适当的函数来创建该组件，并为该组件分配回调，然后将该回调编写为辅助函数。1273学习目标创建组件并分配回调编写回调3在关闭时显示确认对话框示例感谢选用本书作为教材！★获取学习资源74在APP中显示表格数据

作者：刘浩1234

76学习目标逻辑数据分类数据日期时间数据持续时间数据567

非标量数据缺失数据值显示表数组的APP示例

77表数组对于将表格数据存储为MATLAB变量很有用。例如，调用readtable函数可以从电子表格创建表数组。在App中用于显示表格数据的用户界面组件为TableUI（表UI）组件。在TableUI组件中显示的数据类型包括表数组。注意：只有在App设计工具中创建的App和使用uifigure函数创建的App和图窗才支持表数组。

78在表UI组件中，根据逻辑值显示为复选框的选中状态（true表示选中，false表示未选中）。当表UI组件的ColumnEditable属性