主要内容

以编程方式开发自定义UI组件

要创建自定义UI和可视化,您可以组合多个图形和UI对象、更改它们的属性或调用附加函数。在R2020a和早期版本中,存储定制代码并与其他人共享的常用方法是编写脚本或函数。

类的子类,而不是脚本或函数,从R2020b开始,您可以为UI组件创建类实现ComponentContainer基类。创建一个类有以下好处:

  • 容易定制——当用户想要定制UI组件的某个方面时,他们可以设置属性,而不必修改和重新运行代码。用户可以在命令行上修改属性,也可以在属性检查器中检查它们。

  • 封装——用这种方式组织代码可以让你对用户隐藏实现细节。实现执行计算和管理底层图形对象的方法。

本主题概述了通过编程方式定义类来创建自定义UI组件的步骤。或者,从R2022a开始,您可以使用App Designer交互地创建自定义UI组件。有关交互方法的更多信息,请参见在App Designer中创建一个简单的自定义UI组件

UI组件类的结构

UI组件类有几个必需的部分,还有几个是可选的。

在UI组件类的第一行中,指定matlab.ui.componentcontainer.ComponentContainer类作为超类。例如,类的第一行称为ColorSelector是这样的:

classdefColorSelector < matlab.ui.componentcontainer.ComponentContainer

除了指定超类外,还应在类定义中包含以下组件。有些组件是必需的,而其他组件则是推荐的或可选的。

组件 描述

公共财产块
(推荐)

这个块定义了用户可以访问的所有属性。这些属性一起构成UI组件的用户界面。

私有财产块
(推荐)

该块定义了底层图形对象和用户无法访问的其他实现细节。

在这个块中,设置这些属性值:

  • 访问=私人

  • 瞬态

  • NonCopyable

事件块
(可选)

这个块定义了UI组件将触发的事件。

在这个块中,设置这些属性值:

  • HasCallbackProperty

  • NotifyAccess =保护

当你设置HasCallbackProperty属性,MATLAB®为块中的每个事件创建公共属性。公共属性存储用户提供的回调,以便在触发事件时执行。

设置方法
(必需)

这个方法设置UI组件的初始状态。它在MATLAB构造对象时执行一次。

在受保护的方法块。

更新方法
(必需)

此方法更新UI组件中的底层对象。它在以下条件下执行:

  • 在接下来的drawnow在用户更改一个或多个属性值后执行

  • 当用户图形环境的某个方面发生变化时(例如大小)

方法在相同的受保护块中定义此方法设置方法。

构造函数方法

您不必为类编写构造函数方法,因为它继承了类的构造函数方法ComponentContainer基类。继承的构造函数接受可选的输入参数:一个父容器和任意数量的名值对参数,用于在UI组件上设置属性。例如,如果您定义一个名为ColorSelector它具有公共属性价值而且ValueChangedFcn,你可以用下面的代码创建类的实例:

f = uifigure;c = ColorSelector (f,“价值”(1 1 0),“ValueChangedFcn”@ (o, e) disp (“改变”))

如果希望提供具有不同语法或不同行为的构造函数,可以定义自定义构造函数方法。有关自定义构造函数的示例,请参见为图表类编写构造函数

公营及私人物业大厦

将你的类属性划分为至少两个块:

  • 用于存储面向用户界面组件的公共块

  • 用于存储要隐藏的实现细节的私有块

公共块中的属性存储用户提供的输入值。例如,允许用户选择颜色值的UI组件可能将颜色值存储在公共属性中。由于属性名称-值对参数是隐式构造函数方法的可选输入,因此推荐的方法是将公共属性初始化为默认值。

私有块中的属性存储构成UI组件的底层图形对象,以及您希望存储的任何计算值。最终,您的类将使用公共属性中的数据来配置底层对象。设置瞬态而且NonCopyable属性,以避免在用户复制或保存UI组件的实例时存储冗余信息。

例如,下面是允许用户选择颜色值的UI组件的属性块。public属性块存储用户可以控制的值:颜色值。私有属性块存储网格布局管理器、按钮和编辑字段对象。

属性价值{validateattributes(价值,...{“双重”},{“< =”,1,' > = ',0,“大小”,[1 3]})}= [1 0 0];结束属性(访问=私有的,瞬时的,不可复制的)网格matlab.ui.container.GridLayout按钮matlab.ui.control.ButtonEditFieldmatlab.ui.control.EditField结束

事件块

可以为UI组件触发的事件添加第三个块。

属性为块中的每个事件创建公共属性HasCallbackProperty属性。公共属性存储用户提供的回调,以便在触发事件时执行。公共属性的名称是带有字母的事件名称Fcn.例如,允许用户选择颜色值的UI组件可能会定义事件ValueChanged,生成相应的公共财产ValueChangedFcn.使用通知方法来触发事件并在属性中执行回调。

例如,这是允许用户选择颜色值的UI组件的事件块。

事件(HasCallbackProperty, NotifyAccess = protected) ValueChanged结束
的颜色值通知方法来触发ValueChanged事件中执行回调ValueChangedFcn财产。
函数getColorFromUser(comp) c = uisetcolor(comp. value);如果(isscalar(c) && (c == 0))返回结束更新Value属性oldValue = comp.Value;comp.Value = c;执行用户回调和监听器通知(排版,“ValueChanged”);结束
当用户创建UI组件的实例时,他们可以使用生成的公共属性指定在颜色值更改时执行的回调。
f = uifigure;c = ColorSelector (f,“ValueChangedFcn”@ (o, e) disp (“改变”))
有关指定属性回调的详细信息,请参见为程序创建的应用程序创建回调

设置方法

定义一个设置方法。一个设置方法在MATLAB构造UI组件对象时执行一次。任何作为名称-值参数传递给构造函数方法的属性值都在该方法执行后赋值。

使用设置方法:

  • 创建组成组件的图形和UI对象。

  • 将对象作为私有属性存储在组件对象上。

  • 布局和配置对象。

  • 连接对象以在组件中执行一些有用的操作。

定义设置方法。

大多数UI对象创建函数都有一个可选的输入参数来指定父对象。当从类方法内部调用这些函数时,必须指定目标父类。通过使用传递给方法的类实例参数,将目标父对象指定为正在设置的UI组件对象。

例如,考虑一个具有以下属性的UI组件:

  • 一个公共财产叫做价值

  • 三处私人物业网格按钮,EditField

设置方法调用的uigridlayoutuieditfield,uibutton函数为每个私有属性创建底层图形对象,指定UI组件的实例(电脑及相关知识)作为目标父级。

函数设置(comp)创建网格布局来管理构建块。comp. grid = uigridlayout(comp,[1 2],“ColumnWidth”, {“1 x”22},...“RowHeight”, {“健康”},“列空间”2,“填充”2);创建用于输入颜色值的编辑字段comp.EditField = uieditfield (comp。网格,“可编辑”假的,...“HorizontalAlignment”“中心”);%创建按钮以确认颜色更改comp.Button = uibutton (comp。网格,“文本”char (9998),...“ButtonPushedFcn”@ (o, e) comp.getColorFromUser ());结束

更新方法

定义一个更新方法。当您的UI组件对象需要更改其外观以响应值的更改时,执行此方法。

使用更新方法来基于公共属性的新值重新配置UI组件中的底层图形对象。通常,此方法不确定哪些公共属性发生了更改。它重新配置依赖于公共属性的底层图形对象的所有方面。

例如,考虑一个具有以下属性的UI组件:

  • 一个公共财产叫做价值

  • 三处私人物业网格按钮,EditField

更新方法的更新写成BackgroundColorEditField而且按钮对象的颜色存储在价值.的更新方法也会更新EditField对象,使用颜色的数字表示形式。然而,这种方式价值改变了,改变在任何地方都变得同样可见。

函数更新(薪酬)更新编辑字段和按钮的颜色设置([排版。EditField电脑及相关知识.按钮],“写成BackgroundColor”广告样稿。值,...“FontColor”comp.getContrastingColor (comp.Value));%更新编辑字段显示文本comp.EditField.Value = num2str (comp。值,% 0.2克的);结束

在更改属性值和看到这些更改的结果之间可能存在延迟。的更新方法之后第一次运行设置方法运行,然后它每次都运行drawnow执行。的drawnow函数根据用户的MATLAB会话中的图形环境状态,定期自动执行。这种定期执行可能会导致潜在的延迟。

示例:颜色选择器UI组件

这个例子展示了如何使用本页面其他部分讨论的代码创建用于选择颜色的UI组件。创建一个类定义文件ColorSelectorComponent.m在MATLAB路径下的文件夹中。按照以下步骤定义类。

一步 实现

源自ComponentContainer基类。

classdefColorSelector < matlab.ui.componentcontainer.ComponentContainer

定义公共属性。

属性价值{validateattributes(价值,...{“双重”},{“< =”,1,' > = ',0,“大小”,[1 3]})}= [1 0 0];结束

定义公共活动。

事件(HasCallbackProperty, NotifyAccess = protected) ValueChanged% ValueChangedFcn将是生成的回调属性结束

定义私有财产。

属性(访问=私有的,瞬时的,不可复制的)网格matlab.ui.container.GridLayout按钮matlab.ui.control.ButtonEditFieldmatlab.ui.control.EditField结束

实现设置方法。在本例中,调用uigridlayoutuieditfield,uibutton函数创建GridLayoutEditField,按钮对象。将这些对象存储在相应的私有属性中。

指定getColorFromUser方法的ButtonPushedFcn当按下按钮时调用的回调函数。

方法(访问=保护)函数设置(comp)%网格布局来管理构建块comp.Grid = uigridlayout (comp(1、2),“ColumnWidth”, {“1 x”22},...“RowHeight”, {“健康”},“列空间”2,“填充”2);%编辑字段值显示和按钮启动uisetcolorcomp.EditField = uieditfield (comp。网格,“可编辑”假的,...“HorizontalAlignment”“中心”);comp.Button = uibutton (comp。网格,“文本”char (9998),...“ButtonPushedFcn”@ (o, e) comp.getColorFromUser ());结束

实现更新方法。在本例中,更新基础对象的背景颜色和编辑字段中的文本,以显示颜色值。

函数更新(薪酬)更新编辑字段和按钮的颜色设置([排版。EditField电脑及相关知识.按钮],“写成BackgroundColor”广告样稿。值,...“FontColor”comp.getContrastingColor (comp.Value));更新显示文本comp.EditField.Value = num2str (comp。值,% 0.2克的);结束结束

使用私有方法将回调和其他部分连接在一起。

getColorFromUser方法由按下按钮触发,调用uisetcolor函数来打开颜色选择器,然后调用通知函数执行用户回调函数和侦听器函数。

getContrastingColor方法调用更新方法,计算在新背景色上黑色或白色文本哪个更可读。

方法(访问=私人)函数getColorFromUser(comp) c = uisetcolor(comp. value);如果(isscalar(c) && (c == 0))返回结束更新Value属性comp.Value = c;执行用户回调和监听器通知(排版,“ValueChanged”);结束函数颜色contrastColor = getContrastingColor (~)%计算相反颜色C =颜色* 255;contrastColor = [1 1 1];如果(c(1) *。299 + c(2) *。587 + c(3)*.114) > 186 contrastColor = [0 0 0];结束结束结束结束

接下来,通过使用一些公共属性调用隐式构造函数方法,创建UI组件的实例。指定一个回调来显示单词颜色改变了当颜色值发生变化时。

h = ColorSelector (“价值”, [1 1 0]);h.ValueChangedFcn = @(o,e) disp(的颜色改变了);

显示黄色的颜色选择器UI组件的实例。

单击按钮并使用颜色选择器选择颜色。组件改变外观,MATLAB显示文字颜色改变了在命令窗口中。

显示蓝色的颜色选择器UI组件的实例。

另请参阅

功能

相关的话题

Baidu
map