垂直布局

创建一个部分以供您在其中上下垂直堆叠视图。 当该视图绑定到列表时，垂直部分会针对列表中的每一项重复一次，这会生成类似于表的格式。

垂直布局和 水平布局 是最常用于设计用户界面的视图。 通过结合使用“水平布局”和“垂直布局”视图，可以提供大多数的流布局功能，您可以使用这些功能来设计复杂的用户界面。

提示: 通常， UI Toolkit 中的 "水平布局" 和 "垂直布局" 视图与 可折叠面板结合使用。

配置属性

在“配置”下，设置或修改该视图的外观、响应和性能属性。
屏幕大小
在属性名称旁边具有 "屏幕大小" 图标 "屏幕大小" 图标 的配置属性对于每个屏幕大小可以具有不同的值。 如果您未设置值，那么屏幕大小会继承下一个更大的屏幕大小值来作为其缺省值。
主题定义
主题定义指定视图的颜色和样式，并确定视图的外观。 您可以在主题编辑器中预览视图的外观。 请参阅 主题。
下表中显示了“垂直布局”的外观配置属性：
表 1. “垂直布局”的外观配置属性
外观配置属性 描述 数据类型
布局流 "屏幕大小" 图标 这些视图的布局为：
  • 水平
  • 水平内联滚动
  • 水平紧凑
  • 水平自动换行
  • 垂直
  • 垂直紧凑
 String
水平对齐 "屏幕大小" 图标 布局中各视图的水平对齐：
  • 两端对齐
  • 左边
  • 居中
  • 向右
注：两端对齐与水平内联滚动和水平自动换行布局流组合使用的效果并不是很好。 如果您使用这种组合，可能会看到意外的结果。		 String
垂直对齐 "屏幕大小" 图标 布局中各视图的垂直对齐。 该属性仅适用于水平布局流。
  • 顶部
  • 居中
  • 底部
 String
宽度 "屏幕大小" 图标 指定视图的宽度。 可以 px（像素）、%（百分比）或 em 为单位来指定该宽度。 例如， 50px， 20%或 0.4em。 如果未指定单位类型，那么将使用 px。 String
高度 "屏幕大小" 图标 指定该视图的高度，以 px（像素）或 em 为单位。 如果未指定单位类型，那么将使用 px。 String
下表中列出了“垂直布局”的响应配置属性：
表 2. “垂直布局”的响应配置属性
响应配置属性 描述 数据类型
响应传感器 （可选）包含此布局的“响应式传感器”视图的标识。 如果省略此属性，将使用父容器中最近的传感器。 Boolean
行为 根据响应式传感器中定义的框因子，指定该部分的行为方式。
  • 框因子名称：这些属性适用于的响应式传感器框因子的名称。
  • 子布局：指定的框因子可使用的布局。
    • 垂直
    • 垂直紧凑
    • 水平
    • 水平内联滚动
    • 水平紧凑
    • 水平自动换行
  • 子对齐：指定的框因子可使用的对齐方式。
    • 两端对齐
    • 左边
    • 居中
    • 向右
  • 子宽度：此框因子可使用的子视图的宽度。 例如，60%。

    请注意，您可以为包含在布局中的视图指定多个宽度。 例如， 80%或 20%。

  • 可视性：指定的框因子可使用的可视性设置。
    • 可见
    • 无
    • 隐藏
  • 宽度：指定的框因子可使用的部分宽度。
  • 高度：指定的框因子可使用的部分高度。
  • CSS 样式：指定的框因子可应用的 CSS 样式。
  • CSS 类：可添加到指定的框因子的 CSS 类。
 ResponsiveBehavior[]
您还可以通过在 响应式传感器 视图中嵌套垂直布局来控制内容响应能力。
下表中列出了“垂直布局”的性能配置属性：
表 3. “垂直布局”的性能配置属性
性能配置属性 描述 数据类型
正在异步装入 改善大型数据集的 UI 体验，但代价是开始装入部分后的总体行装入时间有所延长。 仅在将部分绑定到列表时才使用此属性。 Boolean
异步批处理大小 指定异步批处理中同步装入的行数。 使用此属性可优化同步和异步装入性能。 仅在将部分绑定到列表时才使用此属性。 Integer
限制: 尽管视图可视性设置为 显示，但不会显示 "垂直布局" 视图的标签。 为了能够对垂直布局视图添加标签，可能需要将其与面板视图一起使用。

示例

在设计器中，向页面布局添加 "垂直布局" 视图，该视图将用作容器视图。 在容器内，放置三个 "面板" 视图，您可以将其命名为 Work Categories， Claim Type和 Elements。 设置每个视图的配置属性，如下所示。

  • 对于 垂直布局: 在 外观下，将 布局流 设置为 Vertical，将 水平对齐 设置为 Justified，将 垂直对齐 设置为 Top。 将 宽度 和 高度 留空。
  • 对于 Work Categories: 在 外观下，将 颜色样式 设置为 Warning，将 宽度 设置为 350px。
  • 对于 Claim Type: 在 外观下，将 颜色样式 设置为 Success，将 宽度 设置为 350px。
  • 对于 Elements: 在 外观下，将 颜色样式 设置为 Danger，将 宽度 设置为 350px。

在运行时，结果显示三个具有相同高度和宽度的面板，其中一个面板堆叠在垂直部分中的另一个面板上: Work Categories 表示黄色 (对于 Warning) ， Claim Type 表示绿色 (对于 Success) ， Elements 表示红色 (对于 Danger)。

事件

在“事件”属性中设置或修改该视图的事件处理程序。 可以将事件设置为以编程方式或在用户与该视图交互时触发。 有关如何定义和编码事件的信息，请参阅 用户定义的事件。 垂直布局具有以下类型的事件处理程序:
  • On load：页面装入时激活。 例如：
    me.setWidth("100%");
  • On responsive update: 在根据设备的屏幕大小调整部分大小时激活。

方法

有关可用于垂直布局的方法，请参阅 垂直布局 JavaScript API 。

其他资源

有关如何创建 Coach 或页面的信息，请参阅 构建 Coach。
有关标准属性 (常规， 配置， 定位， 可视性和 HTML 属性) 的信息，请参阅 查看属性。