In Flex, how do I adjust the font size to align the shortcut with the icon?

Question

I am creating a small Flex UI component that displays a colored square next to a text label. I want to be able to specify the size of the square and internally adjust the properties of the label so that the height of the line matches the square, and the text is vertically centered relative to the square.

At the moment I'm using mx.controls.Labelfor text. Setting the style fontSizeto square size does not work, the label becomes too large. After tracking multiple values ​​in the debugger, I found that

• the line height of the internal text field (the sum of the properties ascentand the descentobject TextFieldMetricsobtained through getTextFieldMetircs()) seems to be about 120% of what I specify as the font size.
• there is a default “leader” of 2 pixels, which I cannot change directly at the level Label, this adds to the overall height of the internal text field ( getTextFieldMetrics().height)
• component height is Labelthen 5 pixels larger than me, I don’t know where they came from.

My current solution is to set the font size to Math.round((iconSize - 2) / 1.2), but as long as this works OK, it seems unsatisfactory. Is there a more reliable and simpler approach to this?

Answer 1

, UITextField Label, : , , , . , getTextLineMetrics(), .

UITextField , , fontSize, ( 2-4 ). , , , , leading .

Label , fontSize, ( 5 ).

, , , Label , . . , , getTextLineMetrics() .