apache-flex - 在 Flex 中，如何调整字体大小以使标签与图标对齐？

Question

我正在构建一个小型 Flex UI 组件，它在文本标签旁边显示一个彩色方 block 。我希望能够指定正方形的大小并在内部调整标签的属性，使行高与正方形匹配，并且文本相对于正方形垂直居中。

目前，我正在使用 mx.controls.Label 作为文本。将 fontSize 样式设置为正方形的大小不起作用，标签会变得太大。在调试器中跟踪几个值后，我发现

• 内部文本字段的行高(通过 getTextFieldMetircs 获取的 TextFieldMetrics 对象的 ascent 和 descent 属性的总和()) 似乎以我指定的 s 字体大小的 120% 结束。
• 有一个默认的 2 像素“前导”，我无法在 Label 级别直接更改，这增加了内部文本字段的整体高度 (getTextFieldMetrics().height )
• Label 组件的高度比那个多了 5 个像素，我不知道这些是从哪里来的。

我目前的解决方案是将字体大小设置为 Math.round((iconSize - 2)/1.2)，但虽然效果不错，但似乎并不令人满意。有没有更可靠、更直接的方法？

Answer 1

与此同时，我对使用 UITextField 而不是 Label 进行了一些实验，这让我发现了一个有趣的观察结果:这两个组件似乎都进行了一些内部缩放，并且根据字体大小调整大小，以便呈现的文本周围始终有一些填充。使用任一组件时，对于相同的字体大小，从 getTextLineMetrics() 返回的数字是不同的。

UITextField 呈现文本，使组件的总像素高度适合指定为 fontSize 的数字，这反过来又使实际文本略小(大约 2 -4 像素)。此外，当您将 leading 设置为零时，它似乎会忽略。

Label 使生成的行高适合指定为 fontSize 的行高，从而使组件大于该行高(大约 5 像素)。

虽然这确实让我感到困惑，但我对使用 Label 组件并对其进行定位感到满意，这样顶部和底部的多余空白被父组件剪掉并且无关紧要了。然后文本具有正确的大小。我垂直居中，这很容易，但也可以使用 getTextLineMetrics() 中的数字进行更复杂的定位。