如何在PDFMake中让s.calculatedQuantity文本与相邻图标始终并排不拆分

问题根因 #

当前排版异常的核心原因有两点：

1. 三个内容放在同级columns配置中，布局引擎会为每一列单独分配弹性宽度，当s.setDescription文本过长时，会挤压后两列的可用空间，甚至触发自动换行把图标挤到下一行，导致s.calculatedQuantity和图标被拆分。
2. 同级columns默认自带列间距，就是你看到的文本和图标之间莫名空隙的来源。

解决方案 #

把需要始终并排的s.calculatedQuantity和图标封装为一个不可拆分的整体列，同时调整列宽策略、关闭不必要的列间距即可，修改后的代码如下：

function generateSetDescription(s, picto) {
  return {
    columns: [
      {
        text: `${s.setDescription} - `,
        fillColor: '#000',
        color: '#FFF',
        // 第一列占剩余弹性宽度
        flex: 1
      },
      {
        // 第二列打包文本和图标作为整体，避免被拆分
        columns: [
          {
            text: `${s.calculatedQuantity}`,
            fillColor: '#000',
            color: '#FFF'
          },
          {
            image: icon,
            width: 10,
            height: 10,
            fillColor: '#000',
          }
        ],
        // 关闭内部列间距，消除文本和图标之间的多余空隙
        columnGap: 0,
        // 第二列宽度自适应内容，不参与弹性分配
        width: 'auto',
        // 强制不换行，完全避免被拆分
        noWrap: true
      }
    ],
    // 两列之间的全局间距可按需调整数值
    columnGap: 2
  }
}

如果有特殊的间距需求，直接调整对应位置的columnGap数值即可。

内容的提问来源于stack exchange，提问作者Abdo Rabah