Adobe Flex - 有什么方法可以自动更改字体大小以适合其容器吗？

Question

我在 Flex 中有一个组件，该组件的一部分是标签。有没有办法自动调整字体大小以适合其容器？

Answer 1

不会自动（至少据我所知），没有设置某种事件处理程序，并对某些事件的发生采取行动。下面是一个简单的 AIR 应用程序，它演示了一种方法 - 在本例中，调整大小事件会触发标签的 fontSize 更改：

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="this_creationComplete()">

    <mx:Script>
        <![CDATA[

            import mx.binding.utils.BindingUtils;
            import mx.binding.utils.ChangeWatcher;

            [Bindable]
            public var myValue:int = 0;

            private function this_creationComplete():void
            {
                setSize();

                addEventListener(Event.RESIZE, handleResize);
            }

            private function handleResize(event:Event):void
            {
                setSize();
            }

            private function setSize():void
            {
                lbl.setStyle("fontSize", this.height / 2);
            }

        ]]>
    </mx:Script>

    <mx:Label id="lbl" text="Hello, world!" />

</mx:WindowedApplication>

这里，当调整应用程序大小时，标签的 fontStyle 属性将更改为应用程序高度的一半；放大或缩小它，你就会看到它是如何工作的。当然还有其他方法，一如既往，但因为我们处理的是样式而不是可绑定属性，所以很可能需要一些自定义编码。希望有帮助！

Answer 2

如果您指的是单行标签，那么这个组件可能会对您有所帮助。考虑到它只能使其字体变小（作为对容器宽度减小的反应）。

import flash.events.Event;
import flash.text.TextLineMetrics;

import mx.controls.Label;
import mx.events.FlexEvent;

public class ElasticLabel extends Label {
    private static const EXTRA_SPACE:Number = 2;

    private static const MIN_FONT_SIZE:Number = 6;

    private var fontResizeRequired:Boolean = false;

    public function ElasticLabel() {
        super();

        addEventListener("explicitMaxWidthChanged", triggerFontResize);
        addEventListener(FlexEvent.VALUE_COMMIT, triggerFontResize);
    }

    private function triggerFontResize(event:Event):void {
        fontResizeRequired = true;
    }

    private function get currentWidth():Number {
        var textMetrics:TextLineMetrics = measureText(text);
        var textWidth:Number = textMetrics.width;
        var paddings:Number = 0;
        var paddingLeft:Number = getStyle("paddingLeft");
        if (!isNaN(paddingLeft)) paddings += paddingLeft;
        var paddingRight:Number = getStyle("paddingRight");
        if (!isNaN(paddingRight)) paddings += paddingRight;
        return textWidth + paddings + EXTRA_SPACE;
    }

    private function resizeFont():void {
        if (!isNaN(maxWidth) && maxWidth > 0) {
            var fontSize:Number = getStyle("fontSize") as Number;
            while (maxWidth < currentWidth 
                    && fontSize > MIN_FONT_SIZE) {
                fontSize -= 0.5;
                setStyle("fontSize", fontSize);
            }
        }
    }

    override protected function updateDisplayList(unscaledWidth:Number, 
            unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        if (fontResizeRequired) {
            resizeFont();
            fontResizeRequired = false;
        }
    }
}