布局容器与组件管理作为移动端画布编辑器的核心功能，支持可视化元素的层级化组织和精细化控制。本文详细介绍布局容器与组件的添加、管理及画布编辑操作。
前提条件
已创建移动端看板。
进入画布编辑器
登录DataV控制台。
在数据看板区域，鼠标悬停至目标移动端看板，单击编辑，进入看板画布编辑器页面。
添加布局容器
布局容器面板，主要用于展示容器种类及添加容器内容到流式布局画布中。
若页面未显示布局容器面板，请单击画布编辑器顶部工具栏的
图标打开面板。
在移动端画布编辑器中，您可通过如下方式添加布局容器：
通过单击方式添加：单击布局容器面板内的某一种类型容器，即可直接添加容器到流式布局画布中。使用该方式添加的容器，会自动展示在流式布局画布的尾部位置。您可通过移动图层位置，调整容器在流式布局画布的位置。
示例添加多行容器。
通过拖拽方式添加：使用鼠标拖拽布局容器面板中的目标容器类型，将其添加至流式布局画布的指定位置或空格子内，实现容器的精准插入或在目标格子内新建容器。
示例添加多列容器。
添加组件
组件列表面板，主要用于添加移动端组件内容到流式布局画布中。
在移动端画布编辑器中，您可通过如下方式添加组件：
通过单击方式添加：单击全部资产面板内的某个组件，可直接在流式布局画布尾部添加一个普通容器，并将组件加入普通容器内的格子中。
示例添加基础区域图。
通过拖拽方式添加：
使用鼠标拖拽全部资产面板内的某个组件至画布中某个空格子内，即可在该格子内添加组件。
示例添加堆叠区域图。
使用鼠标拖拽全部资产面板内的某个组件至画布中某个非空格子内，即可在该格子后新添加一个空格子用于放置该组件。
流式布局画布编辑
流式布局画布编辑是DataV移动端编辑器提供的核心功能，包含容器布局、格子和组件三个核心部分。通过容器布局建立基础框架，利用格子划分内容区域，最后通过组件实现具体内容的填充与展示，三者协同工作形成完整的流式布局编辑体系。
容器布局
DataV的流式布局画布支持容器的自由移动与高度调整功能，可通过鼠标拖拽实现直观的布局编辑。支持的操作介绍如下。
操作 | 描述 |
高度调整 | 重要 容器高度调整仅针对图层栏最外层容器生效。
|
上移 | 在图层栏或流式布局画布内选中一个布局容器后，将鼠标移动到容器边缘的 |
下移 | 在图层栏或流式布局画布内选中一个布局容器后，将鼠标移动到容器边缘的 |
复制 |
|
删除 |
|
修改容器名 | 在图层栏内选中一个布局容器后，双击容器的标题，即可在弹窗内修改容器名称。 |
图标，单击该图标即可将容器向上移动一层。
图标，单击该图标即可将容器向下移动一层。
图标，单击该图标即可复制当前容器的所有内容，并将复制后的容器插入至后方位置。
图标，单击该图标即可删除当前容器。格子
DataV支持在流式布局画布中对格子进行高度调整、分裂等操作，通过鼠标拖拽即可实现灵活的布局控制。支持的操作介绍如下。
操作 | 描述 |
高度调整 | 选中一个格子，您可以通过拖动流式布局画布中格子的把手，调整格子的宽高。 |
分裂格子 | 选中一个格子，您可以单击格子右上角的 |
删除格子 | 选中一个格子，您可以单击格子右上角的 |
或
，将当前格子在纵或横的方向分为两个格子。
，将当前格子删除。
组件
DataV支持在流式布局画布中对组件进行位置调整和复制等操作，通过鼠标拖拽即可实现灵活的组件布局。支持的操作介绍如下。
操作 | 描述 |
调整组件位置 |
|
复制组件 |
|
删除组件 |
|
更改组件配置、数据和交互 | 选中一个组件，您可以在右侧配置面板中，设置组件的配置、数据和交互面板，详细配置方法请参见配置项说明。 |
、
、
、
，在容器内调整组件的位置。
，复制当前组件，复制后的组件将添加在当前组件的后方。
，删除当前组件。图层位置移动
移动编辑器图层栏（又称元素大纲树面板），主要用于管理画布中的容器层级关系，移动端的可视化应用页面内是由一个个容器堆叠而成的，容器中可以配置多个格子，用于承载可视化组件。
可单击选中图层栏内的容器、格子或组件。
单击选中最外层容器后，鼠标拖拽上下调整最外层容器的位置。
单击选中最外层容器后，选择单击图层栏顶部的置顶、置底、上移一层、下移一层功能按键，可调整最外层容器的位置。
单击选中图层栏或流式布局画布内的最外层容器后，通过流式布局画布中的上下移按钮可调整最外层容器的位置。
