FLex3中弹出窗口包含TabNavigator时标签页的标题可能显示不完全的问题及解决方法

Application的代码如下

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Script>
         <!--[CDATA[
             import components.MyPanel;
             import mx.managers.PopUpManager;

             private function openWin():void
             {
                 var win:MyPanel = new MyPanel();

                 PopUpManager.addPopUp(win, this, true)
                 PopUpManager.centerPopUp(win);
             }
         ]]-->
     </mx:Script>
     <mx:Button x="57" y="37" label="Open Window" click="openWin()"/>
 </mx:Application>

弹出窗口MyPanel的代码如下

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="300" fontSize="12">
     <mx:Script>
         <!--[CDATA[
             import mx.managers.PopUpManager;
         ]]-->
     </mx:Script>
     <mx:TabNavigator width="100%" height="100%" creationPolicy="all">
         <mx:Canvas label="基本信息" width="100%" height="100%">
             <mx:Button x="39" y="10" label="按钮"/>
         </mx:Canvas>
         <mx:Canvas label="基信本息" width="100%" height="100%">
             <mx:Label id="msgLbl" x="39" y="10" text="标签"/>
         </mx:Canvas>
     </mx:TabNavigator>
     <mx:ControlBar horizontalAlign="right">
         <mx:Button id="closeBtn" label="Close" click="PopUpManager.removePopUp(this)"/>
     </mx:ControlBar>
 </mx:Panel>

运行后发现第一个标签页的标题显示为“基本...”。

经跟踪后发现，Flex执行代码的顺序如下

 LayoutManager.doPhasedInstantiation()->LayoutManager.validateDisplayList()->UIComponent.validateDisplayList()->Tab.updateDisplayList()->Button.updateDisplayList()->Tab.layoutContents()->LayoutManager.validateDisplayList()->UIComponent.validateDisplayList()->Tab.updateDisplayList()->Button.updateDisplayList()->Button.layoutContents()->Tab.measureText()

在Tab的measureText方法中，由于第一个标签页的样式名称为activeTabStyle，所以会调用UITextFormat.measureText()并最终调用UITextFormat.measure()来获取标题的宽度。在计算宽度时，执行语句

 measurementTextField = TextField(textFieldFactory.createTextField(fontModuleFactory));

调用TextFieldFactory的createTextField方法来获取一个文本控件TextField，然后设置该文本控件的text并获取宽度。

TextFieldFactory的createTextField方法获取文本控件的方式似乎是获取最后一个创建的文本控件，如果tabNavigator的creationPolicy为auto，会获取到clostBtn的textField，如果tabNavigator的creationPolicy为all，则会获取到msgLbl的textField。由于标签页的标题默认是加粗显示，所以如果获取到的TextField的样式不是加粗(fontWeight != 'bold')，那么计算出来的宽度会小于实际的宽度，从而使显示出来的标题被截断。（在Flex中，Label默认不加粗，Button的文本默认加粗）

因此，问题的解决方法有3种：

1.增加样式activeTabStyle并设置字体不加粗。下面的代码为了统一标题的样式，也设置了TabNavigator的tabStyleName样式。

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="300" fontSize="12">
     <mx:Style>
         .tabStyle, .activeTabStyle
         {
             font-weight:normal
         }
     </mx:Style>
     <mx:Script>
         <!--[CDATA[
             import mx.managers.PopUpManager;
         ]]-->
     </mx:Script>
     <mx:TabNavigator width="100%" height="100%" creationPolicy="all" tabStyleName="tabStyle">
         <mx:Canvas label="基本信息" width="100%" height="100%">
             <mx:Button x="39" y="10" label="按钮"/>
         </mx:Canvas>
         <mx:Canvas label="基信本息" width="100%" height="100%">
             <mx:Label id="msgLbl" x="39" y="10" text="标签"/>
         </mx:Canvas>
     </mx:TabNavigator>
     <mx:ControlBar horizontalAlign="right">
         <mx:Button id="closeBtn" label="Close" click="PopUpManager.removePopUp(this)"/>
     </mx:ControlBar>
 </mx:Panel>

2.保证最后一个文本控件的字体是加粗的。如以上的代码如果TabNavigator的creationPolicy是默认的auto，则由于closeBtn默认是加粗的，因此可以不设置。如果creationPolicy是all，则必须保证最后一页的最后一个控件的字体是加粗的，也可以放一个不显示的Label，如

 <mx:Label includeInLayout="false" visible="false" text="隐藏的Label" fontWeight="bold"/>

3.在第一个标签页的label后加一个空格，如

 <mx:Canvas label="基本信息 " width="100%" height="100%">

经试验，所需空格的数量标题的长度有关，当标题只有一个字时不用加空格，之后每增加4个字要加一个空格。

 

 

如果弹出窗口时不执行PopUpManager.centerPopUp()，或者不用弹出窗口、TabNavigator直接显示在Application中，此时TabNavigator显示出来后会再刷新一次从而显示正确的标题，因此不需做任何改动。