主要内容

在应用程序设计器设计视图中布局应用程序

设计视图在App Designer中提供了一套丰富的布局工具,用于设计现代的、专业的应用程序。它还提供了一个广泛的UI组件库,因此您可以创建各种交互功能。你所做的任何改变设计视图自动反映在代码视图.因此,无需编写任何代码,就可以配置应用程序的许多方面。

要添加一个组件到你的应用,使用以下方法之一:

  • 控件中拖动组件组件库把它放在画布上。

  • 中单击一个组件组件库然后将光标移动到画布上。光标变为十字准星。单击鼠标可将组件以默认大小添加到画布中,或在添加组件时单击并拖动组件以调整其大小。有些组件只能按默认大小添加。

应用程序设计器组件库。该库列出了常用组件,如Axes、Button和Check Box组件。

组件的名称出现在浏览器组件在您将其添加到画布之后。控件中选择组件浏览器组件.选择在两个地方同时发生。

应用程序设计器组件浏览器。浏览器显示一个树,其中顶层节点标记为“myApp”,子节点标记为“app.UIFigure”,另一个嵌套子节点标记为“app.Button”。

当您将某些组件(如编辑字段和滑块)拖放到画布上时,它们会使用标签进行分组。这些标签不会出现在浏览器组件的任意位置右击即可将它们添加到列表中浏览器组件并选择在组件浏览器中包含组件标签.如果不希望组件有标签,可以通过按下并按住Ctrl键,同时将组件拖到画布上。

编辑字段组件分组,带有文本“编辑字段”的标签。

如果一个组件有一个标签,并且您更改了标签文本,则浏览器组件更改以匹配该文本。通过双击组件并输入新名称,可以自定义组件的名称。

应用程序设计器组件浏览器。“app.EditField”树节点被高亮显示,文本“EditField”被选中并可编辑。

自定义组件

控件的组件选项卡中编辑组件的属性,可以自定义组件的外观浏览器组件.例如,从按钮选项卡可以更改按钮上显示的文本的对齐方式。

组件浏览器的Button选项卡。该选项卡显示可编辑的按钮属性,如文本、WordWap和HorizontalAlignment,以及它们的值。

一些属性控制组件的行为。例如,可以更改数值编辑字段接受的值的范围限制财产。

选中数字编辑字段组件的组件浏览器。选中Limits属性字段并包含文本“0,255”。

当应用程序运行时,编辑字段只接受该范围内的值。

带有文本“500”的数字编辑字段组件。编辑字段的边界是红色的,并且有一个工具提示说:“值必须在0到255之间”。

通过双击组件,可以直接在画布中编辑一些属性。例如,您可以通过双击按钮标签并输入所需的文本来编辑按钮标签。若要添加多行文本,请按住转变按下键输入

带有文本“重试”的按钮。文本被高亮显示并可编辑。

对齐和空间组件

设计视图的工具中提供的工具,可以通过在画布上拖动组件来排列和调整组件的大小,也可以使用帆布工具条的选项卡。

App Designer提供对齐提示,以帮助您在画布中拖动组件时对齐组件。穿过多个组件中心的橙色虚线表示它们的中心是对齐的。边缘处的橙色实线表示边缘是对齐的。垂线表示组件位于其父容器的中心。

在左边,两个按钮垂直排列,用平行线表示。在右侧,一个按钮以其父按钮为中心,用垂直的虚线表示对齐方式。

控件中的工具对组件进行对齐,以替代在画布上拖动组件对齐部分的工具条。

“设计视图”中的“画布工具条”选项卡,突出显示对齐选项。可以选择沿其左边、中心或右边垂直对齐组件,也可以选择沿其上边、中心或下边水平对齐组件。

当您使用对齐工具时,所选组件将对齐到一个固定组件。锚点组件是选定的最后一个组件,它的选择边框比其他组件更厚。要选择不同的锚点,请按住Ctrl转变键并单击所需的组件两次(一次取消选择该组件,第二次再次选择它)。例如,在下面的图像中格式选项标签是锚。单击左对齐按钮将下拉框和复选框的左边缘对齐到标签的左边缘。

标签、下拉和复选框组件的对齐。在左边,组件不是垂直对齐的。在右侧,它们的左侧边缘垂直对齐。

控件中的工具可以控制相邻组件之间的间距空间部分的工具条。选项中的下拉列表中选择一个选项空间部分的工具条。的均匀选项在组件占用的空间内均匀分配空间。的20.选项将组件间隔20像素。如果您想自定义组件之间的像素数,请在下拉列表中键入一个数字。

设计视图中的画布工具条选项卡。空间部分被突出显示。

接下来,单击应用水平应用垂直.例如,选择均匀然后点击应用垂直在垂直堆叠的组件之间分配空间。

间隔四个编辑字段组件。在左边,编辑字段之间的垂直间距不同。在右边,编辑字段垂直间隔均匀。

组组件

您可以将两个或多个组件组合在一起,将它们修改为单个单元。例如,您可以在确定一组组件的相对位置之后对它们进行分组,这样您就可以在不改变这种关系的情况下移动它们。

要对一组组件进行分组,请在画布中选择它们,然后进行选择分组>集团安排部分的工具条。

在左侧,分别选择标签、滑块和编辑字段组件。在右侧,将三个组件分组,并选中分组。

分组Tool还为这些常见任务提供了功能:

  • 取消组内所有组件的分组—选择组。然后选择分组>取消组

  • 向组中添加组件—选择组件和组。然后选择分组>加入群组

  • 从组中移除组件—选中该组件。然后选择分组>从群组中移除

重新排序组件

方法可以对组件进行重新排序重新排序工具设计视图

例如,创建一个标签,然后创建一个图像。默认情况下,图像出现在标签的顶部。的浏览器组件根据它们的堆叠顺序显示组件,首先显示图像,因为它在顶部,其次显示标签。

标签上方的图像组件,以及组件浏览器(component Browser)显示,其中图像列在标签上方。

若要对组件重新排序,使标签位于图像上方,请在画布上选择图像,然后进行选择重新排序在工具条中。还可以右键单击图像并选择重新排序工具。通过选择向后发送图像退到最后

设计视图工具条的“画布”选项卡。重新排序选项被突出显示,并显示一个菜单,其中有选项“带到前面”、“带到前面”、“向后发送”和“发送到后面”。

图像现在在标签后面。重新排列组件时,组件内部的顺序浏览器组件也在改变。

图像上方的标签组件,以及组件浏览器(component Browser)显示,其中标签列在图像上方。

在容器中摆放组件

当您将一个组件拖放到一个容器中(例如面板)时,容器会变成蓝色,表示该组件是该容器的子组件。这个将组件放入容器的过程称为育儿

拖到面板中的下拉组件。面板是蓝色的。

浏览器组件通过缩进父容器下的子组件名称来显示父子关系。

浏览器组件。文本

创建和编辑上下文菜单

有几种方法可以在App Designer中创建上下文菜单。因为上下文菜单只有在运行中的应用程序中右键单击组件时才可见,所以当您进入时,它们不会出现在图中设计视图.这使得编辑上下文菜单的工作流程与其他组件略有不同。这些部分描述了创建和编辑上下文菜单的方法。

创建上下文菜单

要创建上下文菜单,请将其从组件库到UI图或其他组件上。将上下文菜单分配给快捷菜单属性。创建上下文菜单时,它会出现在画布上图形下方的区域中。这上下文菜单区域为您提供所创建的每个上下文菜单的预览,并指示每个上下文菜单分配给了多少个组件。例如,这是一组上下文菜单可能出现在画布上的方式:

画布上的“上下文菜单”区域,显示三个上下文菜单。

如果要创建上下文菜单而不将其分配给组件,请将其拖动到上下文菜单区域。

或者,通过右键单击组件并选择,为特定组件创建和分配上下文菜单上下文菜单>添加新的上下文菜单

所有上下文菜单都是作为UI图的子菜单创建的,并添加到浏览器组件,即使它们没有被分配给组件。

编辑上下文菜单

中双击上下文菜单来编辑它上下文菜单区域或通过右键单击它并选择菜单名称的编辑选项。将上下文菜单引入上下文菜单编辑区,在这里可以编辑和添加菜单项和子菜单。

菜单编辑区

编辑完成后,单击后退箭头(<),退出编辑区域。

更改上下文菜单分配

要解除上下文菜单与组件的关联,请右键单击组件并选择上下文菜单>取消分配上下文菜单

要将分配给组件的上下文菜单替换为另一个,可以将上下文菜单拖到组件上,或者右键单击组件,单击上下文菜单>替换为,并选择您创建的其他上下文菜单之一。如果只创建了一个上下文菜单,则替换为选项不出现。

或者,选择浏览器组件并选择交互性从组件选项卡。然后,展开快捷菜单下拉列表并选择要分配给组件的不同上下文菜单。

相关的话题