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