决策报表布局方式

1.1 版本

1.2 应用场景

决策报表的布局是指决策报表 body 内所有组件的位置以及组件之间的间距所构成的布局排版，一个好的布局会让你的模板看起来主次分明、清晰美观。

决策报表的布局方式主要分为两类 —— 自适应布局和绝对布局，但自适应布局下还包括两种布局效果 —— 非固定布局和固定布局。

本文将介绍这几种布局方式的特点差异以及各布局的效果。

1.3 功能入口

• 「自适应布局」和「绝对布局」在「模板>PC端自适应属性」中设置。

• 自适应布局下，「非固定布局」和「固定布局」在 body 画布左下角处设置。

在正式介绍布局方式之前，我们需要了解一个功能：布局推荐。

新建决策报表时，会弹出模板布局选择界面，为用户提供了多种常用的布局效果。

• 可选择不同数量的模块进行查看。

• 提供了「简约视图」和「真实视图」两种展示效果。

• 若直接选择新建空白模板，模板默认为「自适应布局>非固定布局」。

• 若选择带布局的模板，body 界面将会按照选择的布局展示「空白占位块+间距」。如下图所示：

注1：「占位块」指自适应布局下用来放置组件的虚拟容器，空白模板初始没有占位块。

注2：目前仅支持新建模板时选择布局，新建模板后不支持修改选择其他布局；不支持自定义布局推荐。

3.1 自适应布局>非固定布局

• 新建决策报表时，无论选择新建空白模板还是带布局的模板，模板默认布局方式均为「自适应布局>非固定布局」。

• 空白模板初始无占位块，但添加组件时会随之添加占位块。

• 新建了带布局的模板时，body 中的虚线框即「空白占位块」，空白占位块不支持任何操作，一个占位块只支持放置一个组件。

• 在右侧属性面板中「布局」处，可设置组件间隔、内边距。如下图所示：

• 拖拽组件到 body 中时，仅支持拖入占位块所在的位置，若拖拽至非占位块的位置，会提示「无法添加到该区域」。

• 当向占位块拖入组件时，组件双向铺满该占位块，右上角组件面板则显示拖入的组件名称。

• 移动或删除组件时，占位块跟随组件移动或删除，布局自动调整。

演示效果如下：

3.2 自适应布局>固定布局

• 空白模板初始无占位块，此时若切换为固定布局，则不支持向 body 中拖入组件，提示「无法添加到该区域」。

• 固定布局下 body 的组件间隔和内边距置灰，不可编辑。如下图所示：

• 拖拽组件时双向铺满占位块，拖拽至非占位块的位置，会提示「无法添加到该区域」。

• 将组件拖拽至已有组件占位块时，会覆盖掉原来的组件。

• 移动或删除组件，不影响占位块的布局。

• 两个占位块的组件可实现位置对换。

• 不支持组件复制粘贴。
  

演示效果如下：

3.3 绝对布局

• 组件拖入到 body 中会保持组件本身大小，不会铺满 body，拖入时注意需将组件完全拖入 body 才可添加成功。

• 组件可重叠，可随意放置位置。

• 组件支持多选，多选时可对组件进行排版对齐的设置，详情请参见文档：组件排版对齐 。

• 组件可通过右侧属性面板调整其位置及大小。

演示效果如下：

3.4 差异总结

看完上述三个布局的演示，总结出以下几个特点：

• 绝对布局自由度最高，可随意放置位置，支持组件重叠，但各组件之间的排版、对齐调整起来会比较费时费力。
  

• 自适应布局的非固定布局灵活度最高，可随意改变布局。

• 自适应布局的固定布局可固定模板布局，适用于希望布局不变，但组件可以随意调整的场景。
  

详细对比如下表：

• 从自适应布局切换为绝对布局时，已经添加的组件位置不变，其他空白占位块消失；

• 从绝对布局切换为「自适应布局」时，提示：切换后所有组件的位置都会改变且无法恢复，确认切换吗？点击确认后，切换到「自适应布局>非固定布局」状态。此时相当于新建空白模板时的状态，组件自适应铺满 body ，且组件之间无间距。如下图所示：

• 非固定布局与固定布局切换时，组件及占位块位置无变化。

注：如果是空白模板从「非固定布局」切换为「固定布局」，此时不支持拖入组件。如下图所示：