Adobe AIR Flex：动态改变 VGroup 的宽度

Question

我们有一个 Adobe AIR 桌面应用程序。 在 window 中有一个带有一些按钮的顶栏。 中央按钮始终在屏幕的水平中心打开一个下拉弹出窗口。 以前没有滚动条，顶部栏和弹出窗口始终水平对齐。 但是现在我们引入了水平和垂直滚动条，因此当 window 调整大小时，顶部栏不在活动 window 的中心，因此它与弹出窗口不对齐。

请检查图片。 顶栏——

弹出窗口 -

如果 window 在水平侧最大化，则顶部栏和弹出窗口对齐。

现在是 mxml 代码 -

public function showMainMenu():void
        {
            log.debug("Menu button clicked.");
            if(animatingMenu)
            {
                log.debug("Suppressing showing of menu. Animation already in progress.");
                return;
            }
            animatingMenu = true;
            menuButton.visible = true;
            mainMenu.visible = true;
            PopUpManager.addPopUp(mainMenu, FlexGlobals.topLevelApplication as DisplayObject, true);
            PopUpManager.centerPopUp(mainMenu);
            mainMenu.y = -mainMenu.height + menuButton.height;
            mainMenu.refresh();
            showMenuEffect.play();
            menuButton.visible = false; 
        }


<fx:Declarations>
    <menu:MainMenu id="mainMenu"/>
    <s:Move id="showMenuEffect" target="{mainMenu}" yFrom="{-mainMenu.height+menuButton.height}" yTo="-5" effectEnd="menuShowed(event)" duration="1200"/>
    <s:Move id="hideMenuEffect" target="{mainMenu}" yFrom="-5" yTo="{-mainMenu.height+menuButton.height}" effectEnd="menuHided(event)" duration="600"/>
</fx:Declarations>

<s:HGroup width="100%">
    <s:VGroup horizontalAlign="center" width="100%" paddingLeft="{this.width / 2 - menuButton.width / 2}">
        <s:Button id="menuButton" automationName="menuButtonShow" click="showMainMenu()" styleName="mainMenuButton" height="40" width="200"/>
    </s:VGroup>
    
    <s:HGroup horizontalAlign="right" width="100%" paddingRight="48" paddingTop="10">
        <desktop:LocaleSelector id="localeSelector"/>
        <desktop:ButtonCorner id="buttonCorner"/>
    </s:HGroup>
    
    <s:VGroup paddingRight="24" paddingTop="25" horizontalAlign="right">
        <s:Button id="closeScreenButton" visible="false" styleName="closeScreenButton" width="29" height="35"/>
    </s:VGroup>     
</s:HGroup>

应该改变什么？ 我怎么能 position 顶部栏总是在屏幕的中心。 我应该创建 css 文件来处理这种情况吗？

Answer 1

这是默认行为。 当您显示一个弹出窗口时，您会告诉它在.y 和.x 中的位置。 当您滚动或调整大小时，您实际上更改了 window 的“中心”，但您从未通知它它已更改。

我会尝试为 window 调整大小和onChange重新居中弹出窗口添加一个侦听器。

示例代码（未经测试，但应该可以工作）：

var widthWatch:ChangeWatcher = ChangeWatcher.watch(this, 'widht', resizeHandler);
private var resizeExecuting:Boolean = false;

//this should run as soon as your app does (in most cases I do that in creationComplete or initialize())
private function onCreationComplete(event:Event):void
{
    widthWatch = ChangeWatcher.watch(this,'width',onSizeChange); 
}
//this checks if the resize stopped before actually moving the popup. Alternatively you can move your popup.center code here
private function onSizeChange(event:Event):void
{
    if(!resizeExecuting)
    callLater(handleResize);
    resizeExecuting = true;
}
  
private function handleResize():void
{
    PopUpManager.centerPopUp(mainMenu);
    resizeExecuting = false;
}