容器布局

使用容器布局可创建复杂的应用程序布局。

添加容器布局控件时，默认情况下提供单个容器。要添加更多简单容器，请单击现有容器旁边的“+”图标。

要在布局中重新定位容器，请将容器拖放到所需位置。

要调整容器大小，请拖动容器边角。

要删除容器，请选择该容器，然后使用键盘上的 Delete 键。或者，在树视图中，右键单击容器，然后选择“删除”。

容器布局控件有两组属性：

• 一组用于容器布局

• 一组用于布局中的每个容器

备注：

我们建议在页面级别使用容器布局控件，以便将页面分为不同的部分。

要在页面中对齐和定位控件，请使用容器控件。

重要提示：为了便于维护，并在设计时和 Runtime 之间保持一致性，请避免嵌套容器布局。

容器布局属性

常规

• 隐藏 - 如果为 true，则在 Runtime 隐藏该控件。

• “已禁用”- 如果为 True，则在 Runtime 禁用该控件。

Events

无事件。

样式

• “背景颜色”- 布局的背景颜色。
• “字体”- 容器布局的字体系列。布局中的所有容器共享相同的字体系列。
• “边距”- 设置布局的边距。默认情况下，边距设置为 0 像素。“上/下”和“左/右”边距属性结合使用。可以使用“边距”部分右侧的“链接”按钮分离这些属性。
• “填充”- 布局的填充。默认情况下，填充设置为 0 像素。“上/下”和“左/右”边距属性结合使用。可以使用“填充”部分右侧的“链接”按钮分离这些属性。
• “大小”- 布局的宽度和高度。默认情况下，宽度设置为 100 像素，而高度设置为 auto，以允许布局根据内部的容器展开。

容器属性

常规

• “工具提示”- 要在容器上显示的工具提示。使用此选项可提供有关控件的其他信息。

• 隐藏 - 如果为 true，则在 Runtime 隐藏该控件。

• “已禁用”- 如果为 True，则在 Runtime 禁用该控件。

Events

• “已单击”- 配置单击容器时会发生的情况。

样式

• “布局”- 确定容器中控件的定位方式：

  • “水平/垂直”- 控件的方向。
  • “对齐”- 容器内控件的对齐方式。
  • “允许换行”- 如果选中，则将容器中的控件换行。

  • “允许滚动”- 如果选中，则允许在容器内滚动。

• “背景颜色”- 容器的背景颜色。
• “边框”- 控件的边框。可以配置边框粗细、颜色和半径。
• “字体”- 容器布局的字体系列。容器中的所有控件共享相同的字体系列。默认情况下，控件会继承直属父容器的字体系列，这由关键字“已继承”指示。
• “边距”- 设置布局的边距。默认情况下，边距设置为 0 像素。“上/下”和“左/右”边距属性结合使用。可以使用“边距”部分右侧的“链接”按钮分离这些属性。
• “填充”- 布局的填充。默认情况下，填充设置为 0 像素。“上/下”和“左/右”边距属性结合使用。可以使用“填充”部分右侧的“链接”按钮分离这些属性。

• 高级 -显示控件的弹性属性。

  • “ Flex 基础” -设置在分配或拿走额外空间之前 Flex 项目的原始大小（ px 、 % 、 em和auto ）。

  • “弹性增长” - 当有额外空间可用时，此值将决定弹性项目相对于其余项目应增长的程度。

  • 弹性收缩- 当空间不足时，此值决定弹性项目相对于其他项目应收缩的程度。

    有关详细信息，请参阅Mozilla 开发者网络文档。