Main Content

使用 App 设计工具创建并运行简单 App

App 设计工具提供的教程可指导您完成创建包含绘图和滑块的简单 App 的过程。滑块用于控制函数绘图的振幅。您可通过运行教程,或执行此处所列的教程步骤创建此 App。

App that contains a plot of some data and a slider labeled "Amplitude"

运行教程

要在 App 设计工具中运行教程,请打开 App 设计工具起始页,并在 App 部分中点击显示示例。然后,选择交互式教程

用于创建 App 的教程步骤

App 设计工具有两种用于创建 App 的视图:设计视图代码视图。使用设计视图可创建 UI 组件并以交互方式设计 App 布局。使用代码视图可对 App 行为进行编程。您可以使用 App 设计工具右上角的切换按钮在这两种视图之间切换。

Design View and Code View toggle buttons

要创建简单的绘图 App,请在 App 设计工具中打开一个新 App,然后按照以下步骤操作。

步骤 1:创建坐标区组件

设计视图中,创建 UI 组件并以交互方式修改其外观。组件库包含所有可以通过交互方式添加到 App 的组件、容器和工具。要添加组件,请将一个组件从组件库拖到 App 画布上。然后,您可以通过在组件浏览器中设置属性,或直接在画布上编辑组件的某些方面(如大小和标签文本),来更改该组件的外观。

在您的绘图 App 中,创建一个坐标区组件,以便显示绘制的数据。将坐标区组件从组件库拖到画布上。

步骤 2:创建滑块组件

滑块组件从组件库拖到画布上。将其放置在坐标区组件的下方。

步骤 3:更新滑块标签

替换滑块的标签文本。双击标签并将词语 Slider 替换为 Amplitude

Slider component. The slider label text is selected and reads "Amplitude".

当您完成 App 布局后,设计视图中的画布应如下所示:

Canvas in App Designer Design View. The canvas contains a blank axes component above a slider labeled "Amplitude" with limits of 0 to 100.

有关 App 布局的详细信息,请参阅在 App 设计工具的设计视图中布局 App

步骤 4:导航到代码视图

在设计完 App 布局后,可通过编写代码来对 App 的行为进行编程。点击画布上方的代码视图按钮以编辑 App 代码。

当您在设计视图中向 App 添加组件时,App 设计工具会自动生成在您运行 App 时执行的代码。此代码会配置您的 App 外观,以匹配您在画布上看到的内容。此代码不可编辑并显示在灰色背景上。App 设计工具还会创建一些对象,作为此生成代码的一部分,供您在对 App 行为进行编程时使用。

  • app 对象 - 此对象存储 App 中的所有数据,例如 UI 组件和您使用属性指定的任何数据。App 中的所有函数都需要使用该对象为第一个参量。按照此模式,您能够从这些函数中访问组件和属性。

  • 组件对象 - 每当您在设计视图中添加组件时,App 设计工具都会将该组件存储为一个对象,并使用 app.ComponentName 形式对其命名。您可以使用组件浏览器查看和修改 App 中组件的名称。要从 App 代码中访问和更新组件属性,请使用模式 app.ComponentName.Property

步骤 5:添加滑块回调函数

使用回调函数对 App 行为进行编程。回调函数是当 App 用户执行特定交互(例如调整滑块的值)时执行的函数。

在您的绘图 App 中,添加一个在用户调整滑块值时执行的回调函数。右键点击组件浏览器中的 app.AmplitudeSlider。然后在上下文菜单中选择回调 > 添加 ValueChangedFcn 回调

App Designer Component Browser. The Callbacks option of the context menu for app.AmplitudeSlider contains options to add a ValueChangedFcn or a ValueChangingFcn callback.

向组件添加回调时,App 设计工具会创建一个回调函数,并将光标置于该函数的主体中。App 设计工具自动将 app 对象作为回调函数的第一个参量进行传递,以支持访问组件及其属性。例如,在 AmplitudeSliderValueChanged 函数中,App 设计工具会自动生成一行代码来访问滑块的值。

AmplitudeSliderValueChanged function definition. The function takes in two arguments: app and event. The first line of code in the function is "value = app.AmplitudeSlider.Value". The cursor is on the second line.

有关使用回调函数对 App 行为进行编程的详细信息,请参阅App 设计工具中的回调

步骤 6:对数据绘图

在 App 设计工具中调用图形函数时,请将目标坐标区或父对象指定为该函数的参量。

在绘图 App 中,如果 App 用户希望更改滑块值,需要通过将 App 中坐标区对象的名称 app.UIAxes 指定为 plot 函数的第一个参量,以更新坐标区中的绘图数据。将以下代码添加到 AmplitudeSliderValueChanged 回调的第二行,以在坐标区上绘制 peaks 函数的缩放输出。

plot(app.UIAxes,value*peaks)

有关在 App 中显示图形的详细信息,请参阅在 App 设计工具中显示图形

步骤 7:更新坐标区范围

要从 App 代码中访问和更新组件属性,请使用模式 app.ComponentName.Property

在您的绘图 App 中,通过设置 app.UIAxes 对象的 YLim 属性来更改 y 轴的范围。将以下命令添加到 AmplitudeSliderValueChanged 回调的第三行:

app.UIAxes.YLim = [-1000 1000];

步骤 8:运行 App

点击 运行以保存并运行 App。调整滑块的值以在 App 中绘制一些数据。

保存更改后,可在 App 设计工具中再次运行您的 App,也可以通过在 MATLAB® 命令行窗口中输入其名称(不带 .mlapp 扩展名)来运行。从命令提示符下运行 App 时,该文件必须位于当前文件夹或 MATLAB 路径中。

相关主题