无代码表单流程设计——布局组件（一）

无代码表单流程设计的平台不少，毕竟这种平台主打的是简单快速搭建个性化应用。对于很多中小企业而言，从零开始搭建一套系统应用确实不太划算，无代码的简单高效和年支付形式大大减轻了他们的负担。反正，用的不好大不了下一年换掉就是，也没多大成本。至于数据迁移，好些无代码系统都支持外部数据集成（像雀书之类的），并不会很繁琐。

再来说表单流程的设计。准确来说，这就是应用搭建了。流程表单就是很多企业需要的BPM应用、审批应用。利用组件（有些平台称之为“控件”、“字段”等）的可复用性，只是通过简单拖拉、鼠标点击、配置操作，就能随心所欲地搭建自己需要的流程应用。

雀书是一款基于Vue和springboot开发的表单流程设计器，是提高表单流程开发效率的利器。雀书这个无代码应用搭建平台还处于迭代阶段，迭代的变化和速度有些快，所以隔一段时间就要关注一下新功能等方面的变化。今天要说的是布局组件。当然，编者想办法整来了一个测试账号，目的是提前带大家欣赏一些新功能。所以，以下有些展示是基于内测端的。

布局组件的种类

雀书的布局组件比一般的无代码平台要多一点。之所以说一点，是因为大多无代码平台的布局组件只有调节字段比例（宽度/长度）这一种选择（功能），听起来好像有点鸡肋……但是，布局这种看起来“花里胡俏不实用”的组件，确实是我们搭建应用时想要调整的、需要的东西啊。脸版面都不能调整好，还能叫“应用”吗？

（上图是其他平台的布局设计）

言归正传，如图，雀书的布局组件包含了容器、分栏、选项卡和分隔线。（测试端的组件都放在配置页面上方，正式版放在配置页面左侧。）本文主要介绍容器。

容器

什么叫容器？在IT中，容器是一个隔离的文件系统，包含用于运行应用程序的代码、依赖项和机器指令。 通过巧妙地使用cgroup、Linux空间和chroot，容器将代码和该代码的任何依赖关系打包到可移植、可执行的软件包中，该软件包可在任何Linux系统上运行。然后，将同一容器部署在任何环境中而无需进行任何更改，从而可以证明可重复的自动化部署。

调整字段布局

但是在雀书无代码平台，容器作为一个布局组件，目前可用来调整（字段）布局。例如，我们点击容器之后，出现一个空白框，在这个空白框中，我们可以任意选择一个或多个其他组件插入。

如图，红色方框内的容器组件中，包含了“日期”这一组件。点击“容器”组件，配置页面右侧出现属性配置，点击“样式属性”，会出现一个布局小预览的图。

我们试着调整“日期”这一组件的布局（类似于Word中的页边距），上下调为“50”，左右调为“300”，接着在工作台我们便能看到“日期”这一组件的布局已经发生了变化，变得居中，上下边距也变得比之前默认的页面开阔。

容纳多种/多个组件

此外，“容器”组件还支持容纳多个组件、多种其他类型的组件。

如图，红色方框内的容器组件中，包容了3个单行文本框。当然，我觉得“开户人”与“开户行”不用占据那么多空间，想把它们放在同一行怎么办？这时候，可以往“容器”组件里插入其他布局组件——“分栏”。

插入“分栏”之后，可在具体的“分栏”容器里添加功能组件，例如单行文本框，编辑好标题。

如图，“开户行”和“开户人”就被布置到同一行中了。我们还可以尝试将“开户人”、“开户行”和“开户账号”三个文本框放到同一行中。其他的布局格式也可以尝试。

操作：点击左边的分栏空白处，点击“分栏”，就会把原来的1/2的部分平均分为2部分，即一行的1/4。

利用“容器”和“分栏”我们可以轻易将表单布局编辑好。编辑好之后点击“保存”返回页面，然后我们可以看到在“数据管理”页面的显示和配置编辑页面不太一样。不过没关系，因为这里是用来做表单数据收集用的，我们点击“应用管理”，到关联了这个数据表单页面的应用去查看，可以看到刚才的布局。在使用表单的“应用中心”页面，也能看到。

“数据管理”页面的表单——

“应用管理”页面的表单——

“应用中心”（使用表单的人能看到）的表单——

以上就是目前的雀书版本“容器”这一组件的使用场景。