悲剧的Menu跟ViewStack 结合

项目中遇到一个小问题，但是就是这个小问题，却困扰我很久很久很久…………

当时的情况是这样的：在项目中用到了Menu,用popupButton弹出来一些都是正常的，但是当你放大缩小浏览器敞口后，诡异的现象出现了，本来menu中靠右对齐的字体居然居中了！但是我在外面用demo测试，却发现时正常的！

找了很久很久，最后发现原来是这个Menu是用在了ViewStack中了(viewStack保持100%），而且是动态添加进去的，这样就导致了这样的状况。亲们啊，你们能想到跟这个牛马不相及ViewStack有关系吗？

?

重现代码：

?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600" 
			   initialize="application1_initializeHandler(event)">
	
	<fx:Script>
		<![CDATA[
			import flexlib.controls.ScrollableArrowMenu;
			
			import mx.controls.Menu;
			import mx.controls.PopUpButton;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			private var menu:Menu;
			protected function application1_initializeHandler(event:FlexEvent):void
			{
				var mdp:Array = [{label:"menu1111111111111"},{label:"menu2"},{label:"menu3"}];
				menu = ScrollableArrowMenu.createMenu(this,mdp,true);
			}
			protected function popHandler(event:MouseEvent):void
			{
				if((event.target as PopUpButton).popUp != menu)
				{
					(event.target as PopUpButton).popUp = menu;
				}
				(event.target as PopUpButton).open();
			}
			
			protected function addclickHandler(event:MouseEvent):void
			{
				var pop:PopUpButton = new PopUpButton();
				pop.label = "popTest";
				pop.addEventListener(MouseEvent.CLICK,popHandler);
				var uicom:NavigatorContent = new NavigatorContent();
				uicom.addElement(pop);
				viewStack.addChild(uicom);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout gap="5"/>
	</s:layout>
	<s:Button label="Add Component" click="addclickHandler(event)"/>
	<s:TabBar dataProvider="{viewStack}"/>
	<mx:ViewStack id="viewStack" width="100%">
		<s:NavigatorContent label="nav1">
			<s:Label text="NavigatorContent 1"/>
		</s:NavigatorContent>
	</mx:ViewStack>
	<s:VGroup id="group" width="100%">
		<mx:PopUpButton label="popup" click="popHandler(event)"/>
	</s:VGroup>
</s:Application>

具体原因是神马愿意我是实在找不出来，不过我找到了解决方法。就是在new PopUpButton时，不要赋值popUp,然后每次打开时都重新生成menu并赋值。

?

代码如下：

?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600" 
			   initialize="application1_initializeHandler(event)">
	
	<fx:Script>
		<![CDATA[
			import flexlib.controls.ScrollableArrowMenu;
			
			import mx.controls.Menu;
			import mx.controls.PopUpButton;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			private var menu:Menu;
			private var mdp:Array;
			protected function application1_initializeHandler(event:FlexEvent):void
			{
				mdp = [{label:"menu1111111111111"},{label:"menu2"},{label:"menu3"}];
				menu = ScrollableArrowMenu.createMenu(this,mdp,true);
			}
			
			protected function popHandler(event:MouseEvent):void
			{
				menu = ScrollableArrowMenu.createMenu(this,mdp,true);
				(event.target as PopUpButton).popUp = menu;
				(event.target as PopUpButton).open();
			}
			
			protected function addclickHandler(event:MouseEvent):void
			{
				var pop:PopUpButton = new PopUpButton();
				pop.label = "popTest";
				pop.addEventListener(MouseEvent.CLICK,popHandler);
				var uicom:NavigatorContent = new NavigatorContent();
				uicom.addElement(pop);
				viewStack.addChild(uicom);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout gap="5"/>
	</s:layout>
	<s:Button label="Add Component" click="addclickHandler(event)"/>
	<s:TabBar dataProvider="{viewStack}"/>
	<mx:ViewStack id="viewStack" width="100%">
		<s:NavigatorContent label="nav1">
			<s:Label text="NavigatorContent 1"/>
		</s:NavigatorContent>
	</mx:ViewStack>
	<s:VGroup id="group" width="100%">
		<mx:PopUpButton label="popup" click="popHandler(event)"/>
	</s:VGroup>
</s:Application>

?

?