Flex中Label控件文字垂直居中的问题

最新推荐文章于 2025-05-20 18:21:18 发布

原创最新推荐文章于 2025-05-20 18:21:18 发布 · 4.9k 阅读

0 ·

CC 4.0 BY-SA版权

Flex 专栏收录该内容

37 篇文章

订阅专栏

在Flex4中，使用spark.components.Label时，可通过设置verticalAlign为"middle"实现文字垂直居中。然而，这样的Label文字不可选中复制。而在Flex3的mx.controls.Label，虽然没有verticalAlign属性，但可以通过设置"selectable"为true使文字可选，并通过调整paddingTop实现垂直居中。例如，计算(headendLabel.height-headendLabel.textHeight)/2作为paddingTop的值，以达到居中效果。对于少量Label的情况，这种方法的性能影响可能不明显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flex4中的spark.components.Label控件有个属性verticalAlign是专门调节Label中文字的垂直位置的，设置为"middle"即为居中显示。但这个Label中的文字无法被选中，故无法复制Label中的文字，感觉很不方便，而此功能在Flex3中的mx.controls.Label却有（设置“selectable”属性为true）。

Flex3中的mx.controls.Label没有verticalAlign属性，要实现其垂直居中得自己实现，网上看到一种方法，自定义一个控件，继承Label并改写其updateDisplayList方法，不知道效果如何，但有种简单的修改方法，即设置此Label的paddingTop属性。例：

<mx:Label id="headendLabel" text="前端:" textAlign="center" height="100%" creationComplete="{headendLabel.setStyle('paddingTop',(headendLabel.height-headendLabel.textHeight)/2);}" selectable="true"/>

其中(headendLabel.height-headendLabel.textHeight)/2即为计算Label显示后的paddingTop值，据说setStyle方法的性能不是很好，调用时界面组件会重绘，没实际测过性能，但如果界面中Label比较少的情况下应该还行。