MATLAB App Designer学习之旅(二 )

一、学习版本调整说明

上篇文章学习所用MATLAB版本是2018b。从本篇文章开始，将调整至MATLAB2019b，主要理由——持续刷新自己，否则就对不起MATLAB一年两次的更新。

自我刷新也是有理由的，MATLAB2019b的App Designer启动导引界面既让人耳目一新，又使人深感贴心， 见图1～图4。作为使用者，在本界面中，你可以选择进入设计，也可以先自我充电，是不是超级贴心？[微笑]

进入MATLAB2019b的App Designer设计界面，见图5，保持了2018b的风格。

与2018b明显不同之处是组件增加了，见图6～图8。

如上所述，App Designer支持大量组件，完全可以设计出功能丰富的APP。MATLAB2019b的App Designer的设计组件共计41个，其中常用组件19个，容器组件3个，图窗工具组件1个（听说更高版本已有3个了，我只能仰天长叹，我自我刷新再快，能有MathWorks公司对MATLAB更新迭代快？！），仪器组件10个，航空航天组件8个。

二、App Designer极速示例

利用丰富的组件，通过视图设计及代码回调等工作，实现数据存储及数据图形化、可视化，这就是App Designer的主要使命。

下面，我们来构建一个简单的 App，App中有一个滑块组件、一个坐标区组件，滑块控制坐标区中的绘图。通过这个示例，感受一下App Designer的可亲可爱之处。

No.1 ——将坐标区组件拖放到画布上，见图9。

No.2 ——将滑块组件拖放到画布上，见图10。

No.3 ——双击滑块组件的默认标签文本，更改为“图像幅度”，见图11。

No.4 ——点击画布右上角的“代码视图”按钮，我们将在此代码窗口的代码块中进行编辑代码。通过编辑代码块，App 可以使用回调函数来响应用户交互，例如调整本例中的滑块。

未编辑前的代码块如下：

classdef tutorialApp < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)

UIFigure matlab.ui.Figure

UIAxes matlab.ui.control.UIAxes

Label matlab.ui.control.Label

Slider matlab.ui.control.Slider

end

% Component initialization

methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create UIFigure and hide until all components are created

app.UIFigure = uifigure('Visible', 'off');

app.UIFigure.Position = [100 100 640 480];

app.UIFigure.Name = 'UI Figure';

% Create UIAxes

app.UIAxes = uiaxes(app.UIFigure);

title(app.UIAxes, 'Title')

xlabel(app.UIAxes, 'X')

ylabel(app.UIAxes, 'Y')

app.UIAxes.TitleFontWeight = 'bold';

app.UIAxes.Position = [140 260 300 185];

% Create Label

app.Label = uilabel(app.UIFigure);

app.Label.HorizontalAlignment = 'right';

app.Label.FontColor = [1 0 0];

app.Label.Position = [164 107 53 22];

app.Label.Text = '图像幅度';

% Create Slider

app.Slider = uislider(app.UIFigure);

app.Slider.Position = [238 116 150 3];

% Show the figure after all components are created

app.UIFigure.Visible = 'on';

end

end

% App creation and deletion

methods (Access = public)

% Construct app

function app = tutorialApp

% Create UIFigure and components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.UIFigure)

if nargout == 0

clear app

end

end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.UIFigure)

end

end

end

No.5 ——在组件浏览器中，右键点击 app.Slider，然后选择 回调 > 添加 ValueChangedFcn 回调。

No.6 ——要在坐标区中绘图，需要将坐标区组件用作绘图命令的第一个输入参数。

在图13所示的代码位置添加以下代码: plot(app.UIAxes, value*peaks);添加完成见图14。

No.7 ——可在代码中使用 app.Component.Property 来获取或设置组件属性。

添加以下代码以设置坐标区的 ylim 属性:“ app.UIAxes.YLim = [-1000 1000];”，见图15。请注意，该命令使用圆点表示法访问 YLim 属性。始终使用模式 app.Component.Property 来访问属性值。

No.8 ——保存并运行 App。保存更改后，可在 App 设计工具中再次运行您的 App，也可以通过在 MATLAB 命令提示符下输入其名称（不带 .mlapp 扩展名）来运行。从命令提示符下运行 App 时，该文件必须位于当前文件夹或 MATLAB 路径中,见图16例。亦可App Designer内点击快捷键运行，见图17。运行并调整滑块按钮时的效果见图18。

二、小结

MATLAB App Designer不是针对专业编程人员，而是为了满足工程人员编程能力相对弱的特点而开发一款应用程序开发设计软件，以面向对象为主，极少量的编码为辅，只需掌握相对基础的编程知识即可开发适合自己的应用程序。给自己加油！