1 问题描述

很多和前端展示相关的场景，界面上无法直接配置实现。此时可以使用“自定义样式”解决。

场景1: 如何做到单据内每行显示的字段数量一样多，不受分辨率的影响？

场景2: 向导控件在pc展示有点小，如何可以将图标以及字体变大？

场景3: 如何在后端代码中使用自定义样式？

2 解决方法

1 如何做到单据内每行显示的字段数量一样多，不受分辨率的影响？

可以看到，页面在不同分辨率下，同一行显示的字段数量并不一致。这是因为系统会默认根据分辨率进行调整。

那么如何做到每行显示的数量一样多呢？可以编写如下的自定义样式。

首先选择字段的外层容器，选择自定义样式

然后编写如下的自定义样式，效果如下：

可以看到不论页面的分辨率如何调整，每行固定显示4个。如果希望显示3个，那么自定义样式就是33.33%,其他数量同理调整即可。

限制：该方法和字段的“占整行”冲突。因为编写了如上的自定义样式，会把系统设置的每行的个数设置为固定值，而也会把占整行覆盖掉。

2 向导控件在pc展示有点小，如何可以将图标以及字体变大？

如图可以看到，向导控件在pc端的展示看起来比较小，而这个是系统提供的标准控件，无法直接调整；想要变大也需要使用自定义样式。

选择向导控件的自定义样式，使用如下的方式：

看下效果，发现已经大了很多。具体需要多大请自行调整

3如何在后端代码中使用自定义样式？

首先，自定义样式的编码和解码方式是Base64，如下图所示：

并且，后端代码中也是可以使用自定义样式的。kd.bos.form.control.Control#setCustomeStyles和kd.bos.metadata.form.ControlAp#setCustomeStyles，自定义样式经过Base64编码后的字符串就是以上方法的入参。此编码后的字符串的获取方式可以自行编码，也可以先在表单设计器中写好，然后在控件的自定义样式栏复制，保证数据的一致性。

简单的使用示例：

String customStyle = "xxxxxxxxxxxxxxxxxxxx";    
// 获取控件    
Control control = this.getControl("xxx_xxxx");    
// 设置自定义样式
control.setCustomeStyles(customStyle);    
// 即时生成前端需要的控件属性配置字典    
Map<String,Object> codfig = control.createClientConfig();    
// 更新   
this.getView().updateControlMetadata("xxx_xxxx", codfig);

3 整体思路分析

自定义样式的使用场景还有很多，无法穷尽。在此说明下使用自定义样式的思路。总体思路为：1 首先确定某控件或容器无法直接配置实现一些场景。2 此时考虑自定义样式，且可以通过预览界面，打开f12的元素界面进行调整、观察需要层级以及属性。 3 最后测试自定义样式是否生效。