# 设置物料插件的"行容器"组件属性 #### 适用场景 "行容器"组件适用于在流程页面中，对多个组件进行横向分栏布局和内容分区展示的场景。它提供灵活的子列容器排列，支持不同子列容器在同一行内并列展示，从而提升页面结构的清晰度和信息组织效率。通过"行容器"，开发人员和流程设计者可以对界面进行合理划分，使业务信息更直观，操作逻辑更明确，用户体验更统一。 #### 基础信息 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 组件名 | 行容器组件的名称，默认为"行容器"，不可修改。 | × | | rel引用类 | 行容器组件的ID，系统自动生成，且不可修改。 | × | | Style | 配置行容器组件样式，支持通过CSS代码自定义行容器组件的样式。 | √ | | 栅格 | 用于设置行内列容器的横向排布方式，通过预设的栅格比例控制子元素的宽度分配规则。支持以下栅格比例： - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002402633941.png "点击放大")："Customize"为"24"，单列容器占满整行（24份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002402513913.png "点击放大")："Customize"为"12:12"，两列容器等宽分布（各占12份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002368874460.png "点击放大")："Customize"为"16:18"，两列容器按8:9比例分配（分别占16份、18份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002368874528.png "点击放大")："Customize"为"18:6"，两列容器按3:1比例分配（分别占18份、6份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002369034892.png "点击放大")："Customize"为"16:8"，两列容器按2:1比例分配（分别占16份、8份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002402634909.png "点击放大")："Customize"为"8:8:8"，三列容器等宽分布（各占8份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002368875364.png "点击放大")："Customize"为"6:12:6"，三列容器按1:2:1比例分配（分别占6份、12份、6份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002369035588.png "点击放大")："Customize"为"6:6:6:6"，四列容器等宽分布（各占6份栅格宽度）。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002402635709.png "点击放大")："Customize"为"4:4:4:4:4:4"，六列容器等宽分布（各占4份栅格宽度）。 | √ | | 栅格间隔 | 配置行内各列容器之间的间距大小，数值越大，列与列之间的空隙越宽，支持通过数值调整布局松紧度。 | √ | #### 更多选项类型 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | Flex布局模式 | 设置是否开启Flex布局模式，用于灵活调整组件的排列方式。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002369064966.png "点击放大")：关闭Flex布局模式，采用默认栅格布局。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002402824565.png "点击放大")：开启Flex布局模式，支持自定义子组件的水平与垂直排列规则。 | √ | | 水平排列方式 | 开启Flex布局模式后，可设置子组件在水平方向的排列方式。支持如下方式： - 从行首开始排列：子组件沿容器左侧依次排列。 - 居中：子组件在容器水平方向居中对齐。 - 从行尾开始排列：子组件沿容器右侧依次排列。 - 两端对齐：子组件两端贴紧容器边缘，中间均匀分布。 - 均匀分布：子组件之间间距相等，整体在容器内居中。 | √ | | 垂直排列方式 | 开启Flex布局模式后，可设置子组件在垂直方向的对齐方式。支持如下方式： - 居下：子组件沿容器底部对齐。 - 居中：子组件在容器垂直方向居中对齐。 - 居上：子组件沿容器顶部对齐。 | √ | #### 高级配置 | **属性名** | **说明** | **支持变量绑定** | |:---|:---|:---| | 是否渲染 | 在页面开发中，可能需要根据某些条件来动态显示或隐藏页面中的组件内容，您可以设置此配置项。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002382885501.png "点击放大")：关闭渲染。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002349045332.png "点击放大")：开启渲染。 | √ | | 循环数据 | 表示需要循环渲染的数组。当页面存在若干份重复的、动态生成的内容时，您可以在高级面板中自定义循环数据。 | √ | | 迭代变量名 | 在循环渲染子项对应的变量名，默认为item。 | × | | 索引变量名 | 循环渲染的索引变量名，默认为index。 | × | | key | 用于标识每个循环项的唯一键值，默认为index。建议根据实际需求选择一个更合适的字段作为唯一标识符，以提高性能和避免潜在问题。 | × |