MATLAB GUI界面设计 第六章——常用库中的其它组件

参考教程：MATLAB App Designer基础教程Matlab GUI界面设计（全集更新完毕-用户界面设计appdesigner（中文）Matlab Gui教程_哔哩哔哩_bilibili

一、案例——摄氏温度转换器（滑块用例）

1、前端制作

（1）新建一个工程，在UIFigure中添加如下组件。

（2）需求转换的摄氏温度范围为0℃到100℃，所以滑块的最值也按此范围设置即可，相应地，仪表的显示范围也要做改动，能合适地显示转换后的华氏温度和开尔文温度。

2、后端制作

（1）滑块和旋钮类似，需要用户手动调节，所以需要为滑块添加回调函数，并且调节过程中温度的值是实时更新的，所以应该增加ChangingFcn函数。

（2）在滑块的回调函数中增加以下代码，主要功能为获取输入摄氏度温度，并将其转化为华氏温度和开尔文温度，分别显示在仪表上。

% 获取摄氏温度
Temp_S = event.Value;% 温度转化
Temp_H = Temp_S * 1.8 + 32;
Temp_K = Temp_S + 273.15;% 仪表显示
app.Gauge_H.Value = Temp_H;
app.Gauge_K.Value = Temp_K;

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

二、案例——摄氏温度转换器2.0（文本区域用例）

1、前端制作

（1）基于先前的摄氏温度转换器工程，在UIFigure中添加文本区域组件。

（2）文本区域和文本编辑字段差不多，都是由一个标签和一块区域组成，不过文本区域默认会大一些。本案例预期在文本区域输出转换结果，所以文本区域可设置为不可编辑，防止用户错改转换结果。

2、后端制作

        基于滑块原本的回调函数，修改为如下代码，主要增加了显示转换结果至文本区域中的语句。

% 获取摄氏温度
Temp_S = event.Value;% 温度转化
Temp_H = Temp_S * 1.8 + 32;
Temp_K = Temp_S + 273.15;% 仪表显示
app.Gauge_H.Value = Temp_H;
app.Gauge_K.Value = Temp_K;% 文字结果输出至文本区域（需要注意类型转换）
Temp_S_String = strcat(string(Temp_S),"℃");
Temp_H_String = strcat(string(Temp_H),"℉");
Temp_K_String = strcat(string(Temp_K),"K");
app.TextArea.Value = {strcat("摄氏温度：", Temp_S_String), ...
strcat("华氏温度：", Temp_H_String), strcat("开尔文温度：", Temp_K_String)};

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

三、案例——图像绘制器（下拉框用例）

1、前端制作

（1）新建一个工程，在UIFigure中添加如下组件。

（2）设置下拉框的选项，主要内容为用户可生成的函数。

2、后端制作

        为下拉框增加回调函数，当用户选择一个选项后，调用一次回调函数更新图像。

% 获取用户选项
value = app.DropDown.Value;% 根据用户选项更新图像
switch valuecase "正弦函数"x = 0:0.01:10;y = sin(x);plot(app.UIAxes,x,y);case "余弦函数"x = 0:0.01:10;y = cos(x);plot(app.UIAxes,x,y);
end

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

四、案例——高级图像显示器（微调器用例）

1、前端制作

（1）新建一个工程，在UIFigure中添加如下组件。

（2）微调器的步长设置为0.1，这样，当用户每次点击“△”或“▽”时，微调器的Value值只会变化0.1。

2、后端制作

        为微调器增加ValueChangingFcn回调函数，当用户调整微调器的数值时，调用回调函数同步更新图像，将图像的x轴取值区间同步更新一个偏移值即可。

% 获取微调器数值
changingValue = event.Value;% 更新图像
x = (0 + changingValue):0.1:(10 + changingValue);
y = sin(x);
plot(app.UIAxes, x, y);

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

五、案例——点灯控制器（单选按钮组用例）

1、前端制作

（1）新建一个工程，在UIFigure中添加如下组件。

（2）单选按钮组添加三个选项，默认选项为第一个选项。

2、后端制作

（1）为单选按钮组增加SelectionValueChangedFcn回调函数，当用户选择相应选项后，单选按钮组的SelectedObject会返回用户的选择信息，后端需要根据用户选择按钮对应的文本（SelectedObject的成员之一Text）字符串进行点灯。

% 获取用户的选择信息
selectedButton = app.ButtonGroup.SelectedObject;% 根据用户选择按钮对应的文本点灯
switch selectedButton.Textcase "1"app.Lamp.Color = 'r';app.Lamp2.Color = 'g';app.Lamp3.Color = 'b';case "2"app.Lamp.Color = 'g';app.Lamp2.Color = 'b';app.Lamp3.Color = 'r';case "3"app.Lamp.Color = 'b';app.Lamp2.Color = 'r';app.Lamp3.Color = 'g';
end

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

六、案例——函数绘制器（复选框用例）

1、前端制作

（1）新建一个工程，在UIFigure中添加如下组件。

（2）复选框可配置默认是否勾选，本案例选择默认不勾选。

2、后端制作

（1）分别为两个复选框增加回调函数，当用户选中一个复选框时，其值返回true，否则返回false。

（2）“绘制sin函数图像”复选框对应的回调函数如下，其功能为根据用户的选择进行正弦函数图像的显示和清除（这里并没有使用真正的清除，而且全部图像擦掉，再重画需要保留的图像）。

% 获取用户的选择
global value1; global value2; % 全局变量声明（也可将其设为app对象的私有属性）
value1 = app.sinCheckBox.Value;% 图像绘制
x = 0:0.01:10;
if value1 == truey = sin(x);hold(app.UIAxes,"on");plot(app.UIAxes, x, y); % 在原图的基础上增加正弦函数图像
elseif value1 == false && value2 == truey = cos(x);hold(app.UIAxes,"off");plot(app.UIAxes, x, y); % 仅保留余弦函数图像
elseif value1 == false && value2 == falsehold(app.UIAxes,"off");plot(app.UIAxes, 0, 0); % 清空
end

（3）“绘制cos函数图像”复选框对应的回调函数如下，其功能为根据用户的选择进行余弦函数图像的显示和清除（这里并没有使用真正的清除，而且全部图像擦掉，再重画需要保留的图像）。

% 获取用户的选择
global value1; global value2; % 全局变量声明
value2 = app.cosCheckBox.Value;% 图像绘制
x = 0:0.01:10;
if value2 == truey = cos(x);hold(app.UIAxes,"on");plot(app.UIAxes, x, y); % 在原图的基础上增加余弦函数图像
elseif value2 == false && value1 == truey = sin(x);hold(app.UIAxes,"off");plot(app.UIAxes, x, y); % 仅保留正弦函数图像
elseif value2 == false && value1 == falsehold(app.UIAxes,"off");plot(app.UIAxes, 0, 0); % 清空
end

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

七、案例——点灯控制器2.0（列表框用例）

1、前端制作

（1）新建一个工程，在UIFigure中添加如下组件。

（2）列表框添加三个选项，默认选项为第一个选项。

2、后端制作

        为列表框增加ValueChangedFcn回调函数，当用户选择相应选项后，列表框的Value会返回用户选择选项对应的文本字符串，后端需要根据字符串进行点灯。

% 获取用户的选项文本字符串
value = app.ListBox.Value;% 根据用户的选项点灯
switch valuecase "Item 1"app.Lamp.Color = 'r';app.Lamp2.Color = 'g';app.Lamp3.Color = 'b';case "Item 2"app.Lamp.Color = 'g';app.Lamp2.Color = 'b';app.Lamp3.Color = 'r';case "Item 3"app.Lamp.Color = 'b';app.Lamp2.Color = 'r';app.Lamp3.Color = 'g';
end

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

八、案例——点灯控制器3.0（状态按钮和切换按钮组用例）

1、前端制作

（1）新建一个工程，在UIFigure中添加如下组件。

（2）状态按钮有按下和松开两种状态，本案例将其配置为默认未按下。

（3）切换按钮组与列表框的逻辑类似，不过切换按钮组可单独为每一个按钮设置样式。

2、后端制作

（1）为切换按钮组增加SelectionValueChangedFcn回调函数，当点灯器使能时，按下对应按钮，相应信号灯变为蓝色，其它灯则变为绿色。

% 获取用户的选择信息
selectedButton = app.ButtonGroup.SelectedObject;% 根据用户选择按钮对应的文本点灯
global value;
if value == true   % 判断点灯器是否使能switch selectedButton.Textcase "Lamp"app.Lamp.Color = 'b';app.Lamp2.Color = 'g';app.Lamp3.Color = 'g';case "Lamp2"app.Lamp.Color = 'g';app.Lamp2.Color = 'b';app.Lamp3.Color = 'g';case "Lamp3"app.Lamp.Color = 'g';app.Lamp2.Color = 'g';app.Lamp3.Color = 'b';end
end

（2）为状态按钮增加回调函数，当用户按下状态按钮，点灯器使能，否则失能，失能状态下无论用户怎么操作点灯器，三个信号灯都不会有任何改变。

% 获取并更新使能状态
global value;
value = app.Button.Value;

3、试运行

        保存文件后点击“运行”，测试APP是否满足需求。

九、表组件

1、表组件的前端

        表组件由若干列组成，在属性栏中选中某一列，即可对该列进行配置，除了名称以外，还可以配置其宽度，以及用户是否可编辑等。

2、将外部Excel表格内容载入表组件

（1）新建一个工程，在UIFigure中添加如下组件，设置表组件的每一列均为不可编辑。

（2）为按钮组件添加回调函数，当用户按下按钮时，回调函数从外部读入Excel表格数据，并显示在表组件上。

% 读取Excel表格内容
t = readtable("C:\Users\Zevalin\Documents\MATLAB\text.xls");% 将读取的内容显示在表组件
app.UITable.Data = t.Variables; 						% 数据主体赋值
app.UITable.ColumnName = t.Properties.VariableNames; 	% 列名赋值

（3）试运行程序，点击“读取表格”，可以正确读入Excel表中的数据，且用户不可编辑。

（4）从上面编写的回调函数中可知，表组件的显示内容主要取决于Data成员，那么通过修改Data成员，可以实现表格数据的增删改，具体可参考MATLAB基础篇的矩阵部分。