在Flex中,如何调整字体大小以将标签与图标对齐?

时间:2010-11-09 13:48:41

标签: flex

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

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

  • 内部文字字段的行高(通过ascent获得的descent对象的TextFieldMetricsgetTextFieldMetircs()属性的总和)似乎最终约为120%我指定的字体大小。
  • 有一个2像素的默认“前导”我无法直接在Label级别更改,这会增加内部文本字段的整体高度(getTextFieldMetrics().height
  • 然后Label组件的高度比那个大5个像素,我不知道它们来自哪里。

我目前的解决方案是将字体大小设置为Math.round((iconSize - 2) / 1.2)但是虽然这样做好了,但似乎并不令人满意。是否有更可靠,更直接的方法?

1 个答案:

答案 0 :(得分:0)

与此同时,我使用UITextField代替Label进行了一些尝试,这引出了一个有趣的观察结果:两个组件似乎都做了一些内部缩放并根据字体大小调整大小,这样渲染的文本总是会有一些填充。使用任一组件时,从getTextLineMetrics()返回的数字对于相同的字体大小是不同的。

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

Label将生成的线条高度与指定为fontSize的线条拟合,使组件大于该值(大约5个像素)。

虽然这对我来说确实令人困惑,但我对使用Label组件并对其进行定位感到满意,以便顶部和底部的多余空白被父组件剪切掉并且不再重要。然后文本大小合适。我是垂直居中的,这很容易,但也可以使用getTextLineMetrics()中的数字来进行更复杂的定位。