> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

容器组件用于包含和对齐一组子组件，是构建复杂布局的基础。
## 属性设置 {#d6df8334}
容器组件支持丰富的属性设置，例如常用设置、位置设置、尺寸设置、布局设置、样式设置、变换设置、状态设置和可见性设置。
### 位置设置 {#0a0bb99e}
容器组件提供三种位置类型选项，以灵活配置组件在界面中的位置。

* 相对定位：堆叠布局下，元素自动向下或向右排列。
* 绝对定位：页面滚动时，绝对定位的元素会随页面一起滚动。
* 固定定位：页面滚动时，固定定位的元素会保持固定位置不变。

### 尺寸设置 {#a166446e}
<!-- @cols-width: 140,712 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|固定比例 |打开固定比例开关，可以设置图片的比例，例如`16:9`、`3:2`等。 |
| | | \
|比例 |配置容器的固定比例，支持`16:9`、`3:2`、`4:3`、`1:1`、`9:16`、`2:3`、`3:4`。 |\
| |仅打开固定比例开关，才支持该参数配置。 |
| | | \
|宽度 |配置容器组件的宽度值，支持以下宽度设置方式： |\
| | |\
| |* 固定：固定的像素值，不会随容器大小变化。 |\
| |* 百分比：元素的宽度占容器宽度的百分比。 |\
| |* 填充容器：元素的宽度填满容器的可用空间。 |\
| |* 适应内容：元素的宽度会随着内容的大小自动调整。 |
| | | \
|高度 |配置容器组件的高度值，支持以下高度设置方式： |\
| | |\
| |* 固定：固定的像素值，不会随容器大小变化。 |\
| |* 百分比：元素的高度占容器高度的百分比。 |\
| |* 填充容器：元素的高度填满容器的可用空间。 |\
| |* 适应内容：元素的高度会随着内容的大小自动调整。 |
| | | \
|尺寸限制 |配置容器组件的尺寸限制，支持配置最大高度、最小高度、最大宽度、最小宽度。 |\
| |合理设置尺寸限制参数可以确保组件在不同屏幕尺寸下保持布局的稳定性和一致性，避免因屏幕尺寸差异而导致的布局问题。 |

### 布局设置 {#7e0f3e95}
<!-- @cols-width: 142,708 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|排列方向 |配置容器组件的排列方向，支持纵向、横向、换行。 |
| | | \
|元素间距 |配置容器组件中各元素的间距，支持自动和固定间距。 |
| | | \
|间距 |当配置固定间距时，设置间距值。 |
| | | \
|元素分布 |配置容器组件中的元素的分布方式。 |

### **样式设置** {#6c5bee0e}
<!-- @cols-width: 140,712 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|填充 |配置容器组件背景的显示颜色。 |
| | | \
|圆角 |配置容器组件背景的圆角，支持单独设置四个角的圆角。 |
| | | \
|内边距 |配置容器组件背景的内边距，可以单独设置四个方向的内边距。 |
| | | \
|外边距 |配置容器组件背景的外边距，可以单独设置四个方向的外边距。 |
| | | \
|边框 |配置容器组件背景的边框样式。支持如下设置方式： |\
| | |\
| |* 预设样式：提供预设的边框样式，可直接使用。 |\
| |* 自定义样式：通过边框线的颜色、粗细和样式，自定义边框样式。 |
| | | \
|阴影 |配置容器组件背景的阴影样式，增强组件的立体感。支持如下设置方式： |\
| | |\
| |* 预设样式：提供预设的阴影样式，可直接使用。 |\
| |* 自定义样式：支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色，自定义阴影样式。 |
| | | \
|模糊 |配置容器组件的模糊效果，支持设置图层模糊和背景模糊。 |\
| | |\
| |* 图层模糊：当前图层内包含的所有元素都将被模糊处理。 |\
| |* 背景模糊：支持模糊处理当前组件底部所覆盖部分。 |
| | | \
|溢出 |配置容器组件溢出相关设置，支持以下溢出方式： |\
| | |\
| |* 滚动：添加滚动条以查看超出的内容。 |\
| |* 可见：显示全部内容。 |\
| |* 隐藏：隐藏超出容器的内容。 |

### 变换设置 {#59290b8e}
丰富界面视觉效果的参数。
<!-- @cols-width: 145,704 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|缩放 |配置容器组件大小的缩放比例。 |
| | | \
|旋转 |配置容器组件围绕中心点旋转的角度。 |
| | | \
|位移 |配置容器组件在水平和垂直方向上的移动距离。 |
| | | \
|倾斜 |配置容器组件在水平和垂直方向上的倾斜角度。 |

### 指针设置 {#b5c1fdfd}
配置鼠标在指定组件区域内的指针样式。
你可以选择**根据元素类型自动显示**，也可以指定某一特定的指针样式。

::::cols
@col 50
属性配置项
![Image=212x215](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/53cbb4d927384ee28857b044f9a76f76~tplv-goo7wpa0wc-image.image)


@col 50
效果图
![Image=1020x379](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3048f0973e4f4af58da2e9e6e2cb1d9f~tplv-goo7wpa0wc-image.image)


::::

### 状态设置 {#5f36e854}
控制容器组件加载态、悬浮态、点击态和出现态的视觉效果参数。
<!-- @cols-width: 143,696 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|加载态 |配置容器组件的加载状态。具体配置说明如下： |\
| | |\
| |* 设置为 true：组件展示加载状态，隐藏组件内容。 |\
| |* 设置为 false：关闭加载状态。 |\
| |* 设置为变量：通过变量值（true 或 false）动态控制容器组件的加载状态。 |\
| |   例如可以通过开关组件控制容器组件的加载状态。开关组件 ID 为 `Switch 1`，当你将容器组件的**加载态**设置为`{{ Switch1.value}}`后，开关打开时，`{{ Switch1.value}}`值为 true，容器组件展示加载态。 |
| | | \
|悬浮效果 |配置容器组件的悬浮态效果。具体配置说明如下： |\
| | |\
| |* 样式效果：当鼠标悬浮到容器组件上时，容器组件的样式变化情况。包括背景色、边框等。详细说明，请参考[样式设置](/guides/container_web#6c5bee0e)。 |\
| |* 变换效果：当鼠标悬浮到容器组件上时，容器组件的动态变化情况。包括缩放、旋转等。详细说明，请参考[变换设置](/guides/container_web#59290b8e)。 |\
| |* 过渡效果：设置容器组件悬浮态的动画效果。 |\
| |   * 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 |\
| |   * 持续时间：设置动画的持续时间，单位为毫秒。 |\
| |   * 延迟时间：设置动画延迟出现的时间，单位为毫秒。 |\
| |   * 生效范围：设置动画的生效范围。 |\
| |      * 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 |\
| |      * 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。 |
| | | \
|点击效果 |配置容器组件的点击态效果。具体配置说明如下： |\
| | |\
| |* 样式效果：点击容器组件时，容器组件的样式变化情况。详细说明，请参考[样式设置](/guides/container_web#6c5bee0e)。 |\
| |* 变换效果：点击容器组件时，容器组件的动态变化情况。详细说明，请参考[变换设置](/guides/container_web#59290b8e)。 |\
| |* 过渡效果：设置容器组件点击态的动画效果。 |\
| |   * 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 |\
| |   * 持续时间：设置动画的持续时间，单位为毫秒。 |\
| |   * 延迟时间：设置动画延迟出现的时间，单位为毫秒。 |\
| |   * 生效范围：设置动画的生效范围。 |\
| |      * 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 |\
| |      * 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。 |
| | | \
|出场效果 |设置容器组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入。 |

### **可见性设置** {#647219b2}
控制容器组件隐藏或显示的参数，支持在特定条件下隐藏容器组件。

* 设置为 false：显示组件。
* 设置为 true：隐藏组件。
* 设置为变量：通过变量值（true 或 false）动态控制容器组件的可见性。
   例如可以通过开关组件控制容器组件的可见性。开关组件 ID 为 `Switch 1`，当你将容器组件的**可见性**设置为`{{ Switch1.value}}`后，开关打开时，`{{ Switch1.value}}`值为 true，容器组件将被隐藏。

## 事件设置 {#8d93f6e8}
通过配置容器组件的事件，可以为容器组件添加丰富的交互功能，以增强用户体验和界面的互动性。
<!-- @cols-width: 148,709 -->
| | | \
|**事件项** |**说明** |
|---|---|
| | | \
|事件类型 |支持以下事件类型： |\
| | |\
| |* 加载时：当组件完成加载时触发。 |\
| |* 点击时：当用户点击组件时触发。 |\
| |* 双击时：当用户双击组件时触发。 |\
| |* 鼠标移动时：当鼠标在组件上移动时触发。 |\
| |* 鼠标悬停时：当鼠标悬停在组件上时触发。 |\
| |* 鼠标移出时：当鼠标从组件上移出时触发。 |\
| |* 鼠标进入时：当鼠标进入组件时触发。 |\
| |* 鼠标离开时：当鼠标离开组件时触发。 |\
| |* 鼠标按下时：当用户在组件上按下鼠标按键时触发。 |\
| |* 鼠标释放时：当用户在组件上释放鼠标按键时触发。 |
| | | \
|组件方法 |* 设置隐藏：隐藏组件，使其不可见。 |\
| |* 保存容器内容为图片：将容器组件中的内容保存为图片。 |

## 配置示例 {#796048b0}
### 保存容器内容为图片 {#4db0cf15}
在文生图类应用中，使用者生成结果后，通常希望一键单击按钮即可将生成结果保存为图片进行分享。基于此需求，扣子编程提供了组件方法**将容器内容保存为图片**，支持通过为组件添加事件的方式，实现一键将生成结果保存为图片。
例如在城市天气画报应用搭建过程中，你可以通过添加一个名为**保存图片**的按钮组件，并为该组件绑定事件，实现一键将生成结果保存为图片。事件配置的重要参数说明如下：

* **执行动作**：选择**控制组件**。
* **选择组件**：想要保存为图片的内容所在的容器，例如 `Div4`。
* **组件方法**：选择`将容器内容保存为图片`。
* **样式设置**：选择**原图**。
   如果需要将容器内容保存为卡片形式，则可以选择**样式设置**为**卡片模板**，选择对应的卡片模板，系统会生成相应的卡片样式。

![Image=1785x1020](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0ea77cd165e14918ab2f3687533bf70d~tplv-goo7wpa0wc-image.image)
在预览页面生成图片后，单击**保存图片**，页面将提示**图片生成中**。等待图片生成完成后，你可以将该图片保存到本地。

::::cols
@col 33
预览页面
![Image=569x561](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b16931304a7b470e879189ae67a2956a~tplv-goo7wpa0wc-image.image)



@col 33
生成过程
![Image=564x556](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e57e0fc28cd349c8922a57843aa12a14~tplv-goo7wpa0wc-image.image)



@col 33
保存到本地
![Image=1543x1082](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/916476ad353046f2a8b437aa9fcabf0b~tplv-goo7wpa0wc-image.image)


::::