Adob​​e 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; 
     } 
    } 
}