10月27日，活字格开发团队负责人雷学斌代表葡萄城做客掘金稀土开发者大会，在低代码探索专题分享中首次揭秘活字格最受专业开发者欢迎的三个特色功能及其实现原理，让我们一起看看低代码如何赢得程序员的“芳心”。本文将重点为大家介绍特色功能三：自由设计页面布局和样式。

可自由布局的解决方案

低代码是覆盖软件开发全生命周期的可视化解决方案。在用户界面设计阶段，低代码开发平台应该提供怎样的设计模式，在确保高度定制化的基础上，尽可能提升开发效率呢？为了解开这一难题，活字格的开发团队决定从“可视化开发”的源头寻找思路。

作为微软最早期的合作伙伴，葡萄城在为微软平台开发者提供大量控件的同时，对该平台的技术特性和背后的实现原理也有深刻理解。在开发WinForm程序的时代，Visual Studio的使用者将控件拖入窗体，IDE根据控件的位置和层次关系，自动生成包含这些信息的代码。运行时，这些代码被顺次执行，还原抽出与设计时一致的样式，达到所见即所得的效果。这种开发方式很快就成为了Windows程序开发的标准模式，程序员不需要将程序运行起来，就能在设计器上看到页面布局的效果。时至今日，市面上用户群体最大的ERP软件——用友U8 就是基于微软的技术栈，用这种可视化的方式完成开发的，在用户体验层面得到了企业用户的广泛认可。

（使用Visual Studio开发WinForm程序的体验）

于是，活字格将这种设计思想，结合Excel的操作体验，应用在Web页面开发中，最终提供了以绝对坐标为基准的页面设计方案。针对不同的应用场景，该方案有“固定布局”和“网格布局”两种模式。

两种布局模式

固定布局

固定布局是活字格的默认做法。开发者在设计器中像操作Excel一样在网格中完成页面元素的布置和样式设置；设计器会在发布时将包含有绝对坐标的页面设计存储为模型文件，并上传到服务器；在最终用户浏览器中运行的解析引擎会把元数据还原为与设计器中一致的Web界面。

（固定布局可实现严格意义上的所见即所得）

除了所见即所得带来的高开发效率，这种设计体验有以下三个显而易见的优势：

1. 布局灵活：开发者可以在页面的任意位置放置任意元素，并设置为任意样式，而不必拘泥于平台内置的模板。
2. 门槛更低：页面布局和样式设置的方式高度类似Excel，全程可视化；开发者不需要具备CSS知识即可完成页面设计；对于熟悉CSS的开发者，活字格还提供了对样式进行进一步调整的能力。
3. 兼容性好：活字格的元数据解析引擎不依赖任何第三方JS框架或CSS样式库，可以确保页面在不同浏览器和设备上的表现一致。

此外，如果开发的目标是代替现有的Excel模板，或者需求方提供的设计方案是用Excel描述的，开发者还可以直接将Excel文件导入活字格。活字格将根据Excel自动生成页面，还原其中的内容和大部分样式，进一步减少页面开发工作量。

（使用活字格开发的“仿纸质单据”页面）

网格布局

固定布局可以确保最终页面的布局和预期完全一致，通常用于开发对界面布局要求非常严格的场景，比如，那些需要延续现有体验、降低使用人员培训成本的内部应用。但是，对于面向外部用户的应用，开发者通常需要提供更加“现代化”的界面，以提升用户满意度。此时，活字格提供的“网格布局”将会派上用场。

与固定布局参考了WinForm的设计思路类似，网格布局的设计思想则源于WPF。为了实现页面布局根据屏幕尺寸自动调整，WPF提供了Grid布局控件，并允许开发者通过在Grid.ColumnDefinition中设置Width=”25*”的形式控制各元素的尺寸占比。简单地说，在固定布局的基础上，将页面元素所在位置的绝对定位坐标，转换为可根据设定规则计算得出的动态坐标，就实现了网格布局（Grid Layout）。

在活字格的页面设计界面中，元素的绝对定位坐标是通过其所在的单元格来确定的，而单元格的位置则以行和列的方式进行描述。当我们将这些行和列设置成“根据内容自适应”或者“在指定的范围内按照比例进行分配”后，绝对定位的坐标就变成了根据规则计算得出的动态坐标。这种做法一方面提供了更具弹性的页面布局方式，另一方面因为延续了固定布局的使用体验，而不是将其割裂，最终使得活字格页面布局的学习曲线更平滑，开发者上手更容易。

（使用网格布局开发出的页面效果）

为开发者提供最大的自由度

不同的应用场景和最终用户群体，对页面布局和样式有着完全不同的要求。作为开发工具，低代码平台理应允许开发者自由开发各种风格的页面，但是很多低代码平台却没有这一点。所以，“用固定布局和网格布局的方式，自由设计页面”入选程序员最喜爱的活字格功能，也就很容易理解了。

活字格，出自专业控件厂商

在低代码领域，葡萄城具有得天独厚的自身条件。在2012年启动低代码预研前，葡萄城已经专注于软件开发工具领域32年，先后基于VBX、COM、.NET和纯前端等技术平台推出各类开发控件产品，并根据技术环境和用户需求的变化，积极进行产品和技术迭代，不断降低软件开发所需的代码量，提升软件开发生产力，积累了丰厚的技术实力和领先的研发经验。经过4年的研发，活字格低代码开发平台于2016年正式推出。为了与更多开发者共创共建，葡萄城采取了面向开发者免费的商业模式，迄今为止已有超过6万名开发者通过活字格走上低代码开发之旅，其中不乏来自软件公司和大企业信息化部门的专业开发者。

如果你是一名对低代码技术持观望态度的开发者，不妨搜索“活字格”，免费下载这款被数万名开发者选择的企业级低代码开发平台，和葡萄城一道，开启您的低代码之旅！