自定义样式的使用场景

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编码后的字符串就是以上方法的入参。此编码后的字符串的获取方式可以自行编码