本文翻译于官方原文
1.自动布局
当一个脚本创建一个窗口及其相关的用户界面元素时,它可以显式地控制窗口的大小以及每个元素和容器元素的位置,也可以利用它的自动ScriptUI提供的布局功能。自动布局机制使用某些可用的信息,于用户界面的元素,连同一套布局规则,建立一个视觉上令人愉悦的布局控件,自动确定元素和容器的适当大小。
自动布局比显式布局更容易编程。它使脚本更容易修改和维护,也更容易针对不同的语言进行本地化。它还使脚本自动适应默认设置ScriptUI windows主机应用程序使用的字体和字体大小。
脚本程序员对自动布局过程有相当大的控制权。每个容器都有一个关联的布局管理器对象,在布局属性中指定。布局管理器控制大小以及所包含元素的位置,以及容器本身的大小。这里有一个默认的布局管理器对象,或者你可以创建一个新的:
myWin.layout = new AutoLayoutManager(myWin);
2.默认的布局行为
默认情况下,autoLayoutManager对象实现默认的布局行为。脚本可以修改默认布局管理器对象的属性,或者根据需要创建一个新的自定义布局管理器,更专业化的布局行为。参见第95页的“自定义布局管理器示例”。
容器的子元素可以组织在单行或单列中,也可以组织在一个堆栈中,其中的元素在容器的同一区域重叠另一个元素,只有顶部元素是完全可见的。这是由容器的方向属性控制,该属性的值可以为行、列或堆栈。您可以嵌套面板和分组容器来创建更复杂的组织。例如,显示两列控件,您可以创建具有行方向的面板,而行方向又包含两个组,每个都有一个列方向。
容器具有控制元素间间距和边缘边距的属性。布局如果没有设置,manager会提供默认值。元素的alignChildren属性控制容器内子元素的对齐方式。
容器,以及各个控件的对齐属性。alignChildren属性确定容器的总体策略,该策略可由特定的子元素覆盖校准值。布局管理器可以通过元素的preferredSize来确定子元素的最佳大小属性。该值默认为由ScriptUI根据控件的特征确定的维度类型和变量特征,如显示的文本字符串,以及用于显示文本的字体和大小。preferredSize值中的宽度或高度值为-1将导致布局管理器计算该维度,同时为另一个维度使用指定的值。
有关如何设置这些属性值以影响自动布局的详细信息,请参见“自动布局”在87页。
注意:默认字体和字体大小在不同的平台上选择不同,并由不同的应用程序在相同的平台上,因此可以显示以相同方式创建的ScriptUI窗口在不同的语境中会有不同。
3.自动布局属性
您的脚本通过在容器对象和子元素中设置某些属性的值来为布局管理器建立规则。下面的例子展示了这些属性的各种值组合的效果。示例基于一个简单的窗口,包含StaticText, Button和EditText元素,创建(使用资源规范)如下:
var w = new Window("window { \
orientation: 'row', \
st: StaticText { }, \
pb: Button { text: 'OK' }, \
et: EditText { characters:4, justify:'right'} \
}");
w.show();
每个示例都展示了用不同方式设置特定布局属性的效果。在每个窗口中,都设置了text,以便窗口标题显示要更改的属性,而w.st.text设置为显示所演示的特定属性值。
4.容器取向
容器的orientation属性指定了容器内子元素的组织。它可以有以下值:
行--- 子元素彼此挨着排列,在容器中从左到右排成一行。容器的高度基于行中最高的子元素的高度,容器的宽度基于所有子元素的组合宽度。列--- 子元素排列在彼此的上方和下方,从上到下排列在容器的一列中。容器的高度基于所有子元素的组合高度,容器的宽度基于列中最宽的子元素。堆栈--- 子元素的排列相互重叠,如在一堆纸中。元素在容器的同一区域内相互覆盖。只有顶部元素是完全可见的。容器的高度基于堆栈中最高的子元素的高度,容器的宽度基于堆栈中最宽的子元素。
下图显示了使用每种方向布局示例窗口的结果:
5.子对象对齐
容器内子元素的对齐方式由两个属性控制:父容器中的alignChildren和每个子容器中的对齐方式。父容器中的alignChildren值控制该容器中所有子容器的对齐方式,除非它被在单个子元素上设置的对齐值覆盖。
这些属性使用相同的值,这些值根据容器的方向指定沿一个轴的对齐方式。您可以指定由两个这样的字符串组成的数组,以指定沿两个轴的对齐方式。第一个字符串指定水平值,第二个字符串指定垂直值。属性值不区分大小写;例如,字符串FILL, Fill, 和fill都是有效的。
还可以使用ScriptUI类的对齐属性中的相应常量来设置值;例如:
myGroup.alignment = [ScriptUI.Alignment.LEFT,ScriptUI.Alignment.TOP];
如果使用常量设置对齐值,然后查询该属性,它将返回与该常量对应的索引号,而不是字符串值。
一行中的元素可以沿着垂直轴对齐,方法如下:
名称 | 解释 |
---|---|
top | 元素的顶部边缘位于其容器的顶部边缘。 |
bottom | 元素的底部边缘位于其容器的底部边缘。 |
center | 元素在容器的上下边缘居中。 |
fill | 元素的高度被调整,以填充顶部和容器之间的高度 |
一列中的元素可以沿着水平轴对齐,方法如下:
名称 | 解释 |
---|---|
left | 元素的左边缘位于其容器的左边缘。 |
right | 元素的右边缘位于容器的右边缘。 |
center | 元素在其容器的左右边距内居中。 |
fill | 调整元素的宽度以填充容器的左右边距之间的宽度。 |
堆栈中的元素可以沿着垂直轴对齐,也可以沿着水平轴对齐,方法如下:
名称 | 解释 |
---|---|
top | 元素的顶部边缘位于其容器的顶部边缘,并且元素在其容器的左右边缘居中。 |
bottom | 元素的底部边缘位于其容器的底部边缘,元素在其容器的左右边缘居中。 |
left | 元素的左边缘位于其容器的左边缘,元素在其容器的顶部和底部边缘居中。 |
right | 元素的右边缘位于容器的右边缘,元素在容器的顶部和底部边缘居中。 |
center | 元素在容器的顶部、底部、右边和左边边缘居中。 |
fill | 元素的高度被调整,以填充顶部和底部边距之间的容器高度。并调整元素的宽度以填充容器的左右边距之间的宽度。 |
下图显示了在父窗口的alignChildren属性中创建行方向和上下对齐设置的样例窗口的结果:
[图片上传失败...(image-5ad073-1645145176359)]
下图显示了在父窗体的alignChildren属性中创建具有列方向和右、左、填充对齐设置的示例窗口的结果。注意,在填充情况下,每个元素的宽度都与容器中最宽的元素一样:
通过设置特定子元素的对齐属性,可以覆盖容器的子对齐方式(由alignChildren指定)。下图显示了当父元素alignChildren值为左时,为EditText元素设置对齐到右的结果:
[图片上传失败...(image-f885e2-1645145176359)]
合理的脚本代码可以有效的提高工作效率,减少重复劳动。
文章引用至 作者知了-联系方式1
文章引用至 作者知了-联系方式2