Question

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

Answer 1

不自动（至少不是我所知道的），没有设置某种事件处理程序，并对某些事件的发生采取行动。这是一个简单的AIR应用程序，演示了一种方法 - 在这种情况下，一个resize事件触发Label的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;
        }
    }
}

Adobe Flex - 可以自动更改字体大小以适合其容器的任何方式吗？

2 个答案: