水平堆栈容器脚本组件

水平堆栈容器是水平排列子组件的父容器。 要垂直排列组件,请使用垂直堆栈容器。

  1. 单击组件工具 栏上的 水平堆栈容器图标。

    该图显示了水平堆栈容器获得焦点时出现的方向指示器。选择水平堆栈容器时,将显示水平方向指示器。 箭头表示添加到控件中的新组件将彼此相邻放置。

    在水平堆栈中,新组件位于最后一个选择的右侧。

  2. 当您从工具栏添加组件时,容器会将它们并排堆叠起来。 例如,如果添加两个按钮,则第二个按钮将放置在第一个按钮的右侧:

    图中显示了水平放置的 2 个组件。

  3. 或者,设置此组件的属性。

    通用

    使用权重来影响大小调整,将宽度配置为固定大小,根据需要增大以显示内容,或者相对于其他组件消耗尽可能多的空间。

    設置 描述
    脚本布局自动调整大小 自动调整大小可将组件配置为根据其内容进行缩小或增长。 例如,标签的宽度可能会随其包含的文本量而增大。
    设置-调整大小-拉伸

    拉伸允许组件相对于其他组件消耗尽可能多的空间,使用权重来影响大小调整。

    如果两个组件都设置为伸展,则默认情况下它们都被分配剩余空间的 50%。 可以通过更改权重值来调整此比例。

    例如,如果将一个组件的权重设置为 200,将另一个组件的权重设置为 100,则第一个组件占用剩余空间的三分之二,而另一个组件只占三分之一。 第一个组件的大小是另一个组件的两倍,因为它的重量是第二个组件权重的两倍。

    脚本布局像素 以像素为单位设置固定大小。 您可以在框中键入整数值,或使用向上或向下箭头来增大或减小大小。 当组件获得焦点时,这些箭头可见。

    使用权重来影响大小调整,将高度配置为固定大小,以便根据需要增大以显示内容,或者相对于其他组件消耗尽可能多的空间。

    設置 描述
    脚本布局自动调整高度大小 自动调整大小可将组件配置为根据其内容进行缩小或增长。
    脚本布局像素高度 以像素为单位设置固定大小。 您可以在框中键入整数值,或使用向上或向下箭头来增大或减小大小。 当组件获得焦点时,这些箭头可见。
    设置-调整大小-拉伸

    拉伸允许组件相对于其他组件消耗尽可能多的空间,使用权重来影响大小调整。

    如果两个组件都设置为伸展,则默认情况下它们都被分配剩余空间的 50%。 可以通过更改权重值来调整此比例。

    例如,如果将一个组件的权重设置为 200,将另一个组件的权重设置为 100,则第一个组件占用剩余空间的三分之二,而另一个组件只占三分之一。 第一个组件的大小是另一个组件的两倍,因为它的重量是第二个组件权重的两倍。

    填充定义内部边框和内容之间的空间。 边距设置边框外的间距,而填充则在边框内添加空间。

    填充_vs_margin

    1. 要有选择地一次更新所有填充值,请在属性面板中 按 “填充” 的 “全部 设置” 按钮。

      全部设置按钮的图像

    2. 单击边框项目的值字段。 旋转控件出现在该字段中。

    3. 使用旋转控件增加或减小边框宽度。 如果选择了 “全部设置”,则更改将应用于所有值。

      该图显示了如何更改边框设置的值

      使用新的填充设置立即重新定位组件。

    将背景颜色设置为以下颜色之一:

    设置-bg-color-popup2
    • 默认值— 指定默认颜色。

    • 颜色— 允许您从常用颜色的调色板中进行选择,或者通过输入 RGB 值或将拾色器移动到新的光谱位置来选择自己的颜色。 设置文本和背景的颜色是外貌控制板。 此属性面板仅适用于具有颜色功能的组件。
      单击 “选 择” 以指定当前选择。

      设置文本颜色弹出颜色

    • Variable— 分配存储在字符串变量中的颜色。 例如,要分配深蓝色:

      1. 单击变 选项卡。

      2. 单击 + 添加变量。

        图中显示了添加新变量的按钮。

      3. 选择 String 作为新变量存储的值的类型。

      4. 在 “名称” 框中键入描述性名称。

      5. 默认值e 设置 为 0000FF 或 #0000FF — 这是深蓝色的十六进制代码。

        在变量中选择颜色

      6. 单击 “ 应用”
      7. 将变量分配给此颜色属性。

        我的颜色变量

    更改脚本页面的背景颜色

    要设置整个页面的背景颜色,请为其根垂直容器指定背景颜色。

    1. 在面包屑栏中,单击根容器图标。

      选择根容器

    2. 在 “ 常用” 或 “ 外观” 下,指定不同的背景颜色。

      您可以通过为其他容器分配不同的背景颜色来创建有趣的效果。

      额外的彩色容器

    边框定义填充和边距之间的空间。 边距设置边框外的间距,而填充则在边框和组件之间添加空间。

    该图显示了边距、边框和填充设置之间的关系。

    1. 要有选择地一次更新所有边框值,请在属性面板中按边框的全部设置按钮。

      全部设置按钮的图像

    2. 单击边框项目的值字段。 旋转控件出现在该字段中。

    3. 使用旋转控件增加或减小边框宽度。 如果选择了 “全部设置”,则更改将应用于所有填充值。

      该图显示了如何更改边框设置的值

      使用新的边框设置立即重新定位组件。

    布局

    使用权重来影响大小调整,将宽度配置为固定大小,根据需要增大以显示内容,或者相对于其他组件消耗尽可能多的空间。

    設置 描述
    脚本布局自动调整大小 自动调整大小可将组件配置为根据其内容进行缩小或增长。 例如,标签的宽度可能会随其包含的文本量而增大。
    设置-调整大小-拉伸

    拉伸允许组件相对于其他组件消耗尽可能多的空间,使用权重来影响大小调整。

    如果两个组件都设置为伸展,则默认情况下它们都被分配剩余空间的 50%。 可以通过更改权重值来调整此比例。

    例如,如果将一个组件的权重设置为 200,将另一个组件的权重设置为 100,则第一个组件占用剩余空间的三分之二,而另一个组件只占三分之一。 第一个组件的大小是另一个组件的两倍,因为它的重量是第二个组件权重的两倍。

    脚本布局像素 以像素为单位设置固定大小。 您可以在框中键入整数值,或使用向上或向下箭头来增大或减小大小。 当组件获得焦点时,这些箭头可见。

    使用权重来影响大小调整,将高度配置为固定大小,以便根据需要增大以显示内容,或者相对于其他组件消耗尽可能多的空间。

    設置 描述
    脚本布局自动调整高度大小 自动调整大小可将组件配置为根据其内容进行缩小或增长。
    脚本布局像素高度 以像素为单位设置固定大小。 您可以在框中键入整数值,或使用向上或向下箭头来增大或减小大小。 当组件获得焦点时,这些箭头可见。
    设置-调整大小-拉伸

    拉伸允许组件相对于其他组件消耗尽可能多的空间,使用权重来影响大小调整。

    如果两个组件都设置为伸展,则默认情况下它们都被分配剩余空间的 50%。 可以通过更改权重值来调整此比例。

    例如,如果将一个组件的权重设置为 200,将另一个组件的权重设置为 100,则第一个组件占用剩余空间的三分之二,而另一个组件只占三分之一。 第一个组件的大小是另一个组件的两倍,因为它的重量是第二个组件权重的两倍。

    将组件相对于其父容器向左、向右或居中对齐。

    提示: 如果组件的父容器的 “高度” 设置为 “ 自动调整大小”,则组件不能垂直居中对齐。 要更正此问题,请将父容器的高度设置为 拉伸 或设置为固定高度(以 像素为单位)
    設置 示例
    向左对齐 2 左对齐示例 2
    对齐中心 2 对齐中心示例 2
    向右对齐 2 右对齐示例 2
    对齐启动 对齐开始示例
    垂直居中对齐 垂直居中对齐示例
    垂直端对齐 垂直对齐结束示例

    如果容器有额外的空间,子排列方式决定了容器内容的排列方式。

    如果容器的宽度和高度自动调整大小,则禁用此设置。 自动调整大小会告诉容器扩展到它所包含的元素的大小。 由于这样不允许额外的空间,因此子安排属性没有任何意义,并且会被禁用。 要启用子项排列,请设置容器的宽度(以像素为单位),或者设置为伸展。

    当容器有额外空间时,您可以选择以下选项之一来影响空间的分布方式:

    • Start— 将内容分配到容器的起始位置。

      child _安排_start

    • 中心— 内容分布到容器的中心。

      child _ 安排 _ 中心

    • End— 内容分布到容器的末端。

      child _安排_end

    边距设置边框周围的左、右、上和下间距。

    该图显示了边距、边框和填充设置之间的关系。

    1. 要有选择地一次更新所有边距值,请在属性面板中 按边距的全部 设置按钮。

      全部设置按钮的图像

    2. 单击保证金的值字段。 旋转控件出现在该字段中。

    3. 使用旋转控制来增加或减少边距。 如果选择 了 “全部 设置”,则更改将应用于所有边距。

      设置-保证金微调器

      该组件会立即使用其新的边距设置重新定位。

    根据布尔值(True 或 False)变量的值设置组件的可见性。

    1. 单击 “ 布局” 属性组。 在可见下方,单击 选择变量
    2. 选择一个变量,或者选择性地创建一个新的 “是/否” 变量,然后将该新变量分配给 Visible 属性。
    3. 在运行时,当变量的值为 True 时,组件是可见的。 相反,当变量的值为 False 时,它会被隐藏

    填充定义内部边框和内容之间的空间。 边距设置边框外的间距,而填充则在边框内添加空间。

    填充_vs_margin

    1. 要有选择地一次更新所有填充值,请在属性面板中 按 “填充” 的 “全部 设置” 按钮。

      全部设置按钮的图像

    2. 单击边框项目的值字段。 旋转控件出现在该字段中。

    3. 使用旋转控件增加或减小边框宽度。 如果选择了 “全部设置”,则更改将应用于所有值。

      该图显示了如何更改边框设置的值

      使用新的填充设置立即重新定位组件。

    外观

    将背景颜色设置为以下颜色之一:

    设置-bg-color-popup2
    • 默认值— 指定默认颜色。

    • 颜色— 允许您从常用颜色的调色板中进行选择,或者通过输入 RGB 值或将拾色器移动到新的光谱位置来选择自己的颜色。 设置文本和背景的颜色是外貌控制板。 此属性面板仅适用于具有颜色功能的组件。
      单击 “选 择” 以指定当前选择。

      设置文本颜色弹出颜色

    • Variable— 分配存储在字符串变量中的颜色。 例如,要分配深蓝色:

      1. 单击变 选项卡。

      2. 单击 + 添加变量。

        图中显示了添加新变量的按钮。

      3. 选择 String 作为新变量存储的值的类型。

      4. 在 “名称” 框中键入描述性名称。

      5. 默认值e 设置 为 0000FF 或 #0000FF — 这是深蓝色的十六进制代码。

        在变量中选择颜色

      6. 单击 “ 应用”
      7. 将变量分配给此颜色属性。

        我的颜色变量

    更改脚本页面的背景颜色

    要设置整个页面的背景颜色,请为其根垂直容器指定背景颜色。

    1. 在面包屑栏中,单击根容器图标。

      选择根容器

    2. 在 “ 常用” 或 “ 外观” 下,指定不同的背景颜色。

      您可以通过为其他容器分配不同的背景颜色来创建有趣的效果。

      额外的彩色容器

    边框定义填充和边距之间的空间。 边距设置边框外的间距,而填充则在边框和组件之间添加空间。

    该图显示了边距、边框和填充设置之间的关系。

    1. 要有选择地一次更新所有边框值,请在属性面板中按边框的全部设置按钮。

      全部设置按钮的图像

    2. 单击边框项目的值字段。 旋转控件出现在该字段中。

    3. 使用旋转控件增加或减小边框宽度。 如果选择了 “全部设置”,则更改将应用于所有填充值。

      该图显示了如何更改边框设置的值

      使用新的边框设置立即重新定位组件。