mx:ViewStack中组的宽度

Question

我有一个简单的应用程序：

<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" xmlns:local="*">

    <mx:ViewStack width="100%" creationPolicy="all">
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
    </mx:ViewStack>

</s:Application>

我的TestGroup是一个赤裸裸的Spark组。它有creationComplete方法，其中跟踪组的宽度：

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="group1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function group1_creationCompleteHandler(event:FlexEvent):void
            {
                trace("internal group width: " + this.width)
            }

        ]]>
    </fx:Script>
</s:Group>

当我运行应用程序时，第一个TestGroup的宽度为1600 (大致正确)，但不考虑creationPolicy="all"和width="100%"的第二个宽度为0(零)。

它表明ms:ViewStack不会为所选组件以外的组件设置宽度。

这种行为背后的逻辑是什么？

我如何修复它，使我的第二个组有一个真正的宽度，并且我可以在创建完成时获得它？

Answer 1

您可以监听change事件，该事件将在每次选定的组发生更改时触发。

只有当前的活动组才会给你她的真实宽度，所以你可以这样做someThing

<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" xmlns:local="*">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function onChange(event:Event):void
            {
                if(myViewStack.selectedChild){
                    myViewStack.selectedChild.initMyGroup();  
                }
            }

        ]]>
    </fx:Script>

    <mx:ViewStack id="myViewStack" width="100%" creationPolicy="all" change="onChange()">
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
    </mx:ViewStack>

</s:Application>




<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public function initMyGroup():void
            {
                trace("internal group width: " + this.width)
            }

        ]]>
    </fx:Script>
</s:Group>

Answer 2

ViewStack是一个多视图容器。即使将creationComplete设置为，顺便说一下，对于单视图容器只有，Flex会实例化那些最初对ViewStack可见的控件。要实现您的目标，请尝试使用ViewStack以外的其他容器。

更多细节可以在这里找到：http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html

Answer 3

此行为背后的逻辑是什么？

因为不需要呈现TestGroup元素。如果您为all设置了creationPlicy，那么flex容器将创建内部元素，但这并不意味着容器将为元素设置大小。

我如何修复它，使我的第二组有一个真正的宽度，并且我可以在创建完成时获得它？

使用event updateComplete。只要组件的布局、位置、大小或其他可视特征发生更改，并且组件更新以进行显示，Flex就会调度updateComplete事件。因此，当第一次选择第二个TestGroup时，您将获得它。