错误元素顺序使用SkinnableContainer和状态

当我使用SkinnableContainer（例如BorderContainer）的后代，其本身被包括或排除在一个状态时，在默认的状态下的子元素中出现不正确的顺序。错误元素顺序使用SkinnableContainer和状态

当使用Group而不是BorderContainer，或者容器本身未包含或排除在某个状态中，或者状态出现前后变化时，此问题消失。

这是怎么回事？我是否错过了一些东西，或者这是Flex中的一个错误？

<?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"> 
    <s:states> 
     <s:State name="state1" /> 
     <s:State name="state2" /> 
    </s:states> 
    <s:VGroup> 
     <s:BorderContainer includeIn="state1,state2"> 
      <s:layout> 
       <s:HorizontalLayout paddingLeft="10" paddingTop="10" /> 
      </s:layout> 
      <s:Label text="A"/> 
      <s:Label text="B" includeIn="state1" /> 
     </s:BorderContainer> 
     <s:Button label="state" click="currentState = currentState == 'state1' ? 'state2' : 'state1';" /> 
    </s:VGroup> 
</s:Application>

来源

2011-08-10 martiner

我记得围绕同一个问题工作。这可能是一个错误。 – RIAstar

我认为这个问题与includeIn有关。下面的代码，这与你相似，做工精细：

<?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"> 
    <s:states> 
     <s:State name="state1" /> 
     <s:State name="state2" /> 
    </s:states> 
    <s:VGroup> 
     <s:BorderContainer> 
      <s:layout> 
       <s:HorizontalLayout paddingLeft="10" paddingTop="10" /> 
      </s:layout> 
      <s:Label text="A"/> 
      <s:Label text="B" excludeFrom="state2" /> 
     </s:BorderContainer> 
     <s:Button label="state" click="currentState = currentState == 'state1' ? 'state2' : 'state1';" /> 
    </s:VGroup> 
</s:Application>

我刚刚删除多余的不必要includeIn秒。

来源

2011-08-10 08:32:32 Constantiner

如果你仔细阅读，我写了_当容器本身不包含或排除在state_中。无论如何，这个例子是一个更大的组件的简化版本。没有_unnecessary_这样的事情，它只是简化。 – martiner

好的。我已经使您的简化代码按预期工作。让我们给我们完整的代码，我们会调试它:) – Constantiner

我想我们应该找出这里的逻辑，而不仅仅是一个代码的工作。我测试了一个从B复制的附加标签C，A和B是正确的，但是C被放在最左边（C A B）。我认为这是一个Flex的错误。我的临时解决方案是在state1中添加一个s：Spacer，然后所有其他孩子都可以。 –

我已经遇到这个问题，我可以证实它似乎与SkinnableContainer有关。在我的情况下，每当在Panel或TitleWindow的controlGroup中有一个SkinnableContainer时，问题就会显现出来。当我弄清楚究竟是什么原因时，我会更新这篇文章。与此同时，这里是一个示例应用程序产生的行为：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application minWidth="955" 
       minHeight="600" 
       xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       currentState="{'EditImgState'}"> 
    <s:layout> 
     <s:VerticalLayout/> 
    </s:layout> 
    <s:states> 
     <s:State name="ReadOnlyState"/> 
     <s:State name="InfoState"/> 
     <s:State name="EditInfoState"/> 
     <s:State name="EditImgState"/> 
     <s:State name="EditBulletinState"/> 
     <s:State name="VendorReadOnlyState"/> 
     <s:State name="VendorState"/> 
    </s:states> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <s:Panel title="Product Info" 
      preinitialize="{watchButtonSet()}" 
      id="frameHeaderPanel"> 
     <s:controlBarContent> 
      <s:SkinnableContainer> 
       <s:layout> 
        <s:HorizontalLayout> 
        </s:HorizontalLayout> 
       </s:layout> 
       <!--<s:HGroup>--> 
       <s:Button id="details_edit_button" 
          includeIn="EditInfoState" 
          styleName="toolbarButton applicationFormEditIcon" 
          label="Edit" 
          click="{ dispatchEvent(new Event('frameHeaderPanel::editButtonClicked')) }" 
          click.VendorState="{ dispatchEvent(new Event('frameHeaderPanel::vendorView::editButtonClicked')) }"/> 
       <s:Button id="approvedReleasedButton" 
          includeIn="EditInfoState" 
          styleName="toolbarButton tickIcon" 
          label="Mark Approved" 
          click="{dispatchEvent(new Event('frameHeaderPanel::markApproved'))}"/> 
       <s:Button id="frameRefreshButton" 
          styleName="toolbarButton refresh" 
          label="Refresh" 
          click="{ dispatchEvent(new Event('frameHeaderPanel::refreshButtonClicked')) }"/> 
       <s:Button id="vendorInfoExportButton" 
          includeIn="VendorState" 
          label="Export Vendor Info" 
          styleName="toolbarButton reportIcon" 
          click="{dispatchEvent(new Event('frameHeaderPanel::vendorView::exportButtonClicked'))}"/> 
       <s:Button id="lpApprovalExportButton" 
          styleName="toolbarButton reportIcon" 
          label="Generate Licensed Product Approval Form" 
          click="{ dispatchEvent(new Event('frameHeaderPanel::lpApprovalExportButtonClicked')) }"/> 
       <s:Button id="imgUploadButton" 
          includeIn="EditImgState" 
          styleName="toolbarButton imageAddIcon" 
          label="Upload Images" 
          click="{ dispatchEvent(new Event('frameHeaderPanel::imgUploadButtonClicked')) }"/> 
       <s:Button id="imgDeleteButton" 
          includeIn="EditImgState" 
          styleName="toolbarButton imageDeleteIcon" 
          label="Delete Image" 
          click="{ dispatchEvent(new Event('frameHeaderPanel::imgDeleteButtonClicked')) }"/> 
       <!--</s:HGroup>--> 
      </s:SkinnableContainer> 
     </s:controlBarContent> 
     <s:Scroller height="100%" 
        width="100%"> 
      <s:VGroup id="readOnlyHeaderGroup" 
         height="100%"> 
       <s:RichText text="Some content goes here"/> 
       <s:SkinnableContainer> 
        <s:layout> 
         <s:HorizontalLayout> 
         </s:HorizontalLayout> 
        </s:layout> 
        <s:Button id="details_edit_button_2" 
           includeIn="EditInfoState" 
           styleName="toolbarButton applicationFormEditIcon" 
           label="Edit" 
           click="{ dispatchEvent(new Event('frameHeaderPanel::editButtonClicked')) }" 
           click.VendorState="{ dispatchEvent(new Event('frameHeaderPanel::vendorView::editButtonClicked')) }"/> 
        <s:Button id="approvedReleasedButton_2" 
           includeIn="EditInfoState" 
           styleName="toolbarButton tickIcon" 
           label="Mark Approved" 
           click="{dispatchEvent(new Event('frameHeaderPanel::markApproved'))}"/> 
        <s:Button id="frameRefreshButton_2" 
           styleName="toolbarButton refresh" 
           label="Refresh" 
           click="{ dispatchEvent(new Event('frameHeaderPanel::refreshButtonClicked')) }"/> 
        <s:Button id="vendorInfoExportButton_2" 
           includeIn="VendorState" 
           label="Export Vendor Info" 
           styleName="toolbarButton reportIcon" 
           click="{dispatchEvent(new Event('frameHeaderPanel::vendorView::exportButtonClicked'))}"/> 
        <s:Button id="lpApprovalExportButton_2" 
           styleName="toolbarButton reportIcon" 
           label="Generate Licensed Product Approval Form" 
           click="{ dispatchEvent(new Event('frameHeaderPanel::lpApprovalExportButtonClicked')) }"/> 
        <s:Button id="imgUploadButton_2" 
           includeIn="EditImgState" 
           styleName="toolbarButton imageAddIcon" 
           label="Upload Images" 
           click="{ dispatchEvent(new Event('frameHeaderPanel::imgUploadButtonClicked')) }"/> 
        <s:Button id="imgDeleteButton_2" 
           includeIn="EditImgState" 
           styleName="toolbarButton imageDeleteIcon" 
           label="Delete Image" 
           click="{ dispatchEvent(new Event('frameHeaderPanel::imgDeleteButtonClicked')) }"/> 
       </s:SkinnableContainer> 
      </s:VGroup> 
     </s:Scroller> 
    </s:Panel> 
    <fx:Script> 
     <![CDATA[ 
      import mx.binding.utils.BindingUtils; 
      import mx.binding.utils.ChangeWatcher; 

      public function watchButtonSet():void 
      { 
       var watchSetter:ChangeWatcher=BindingUtils.bindSetter(handleButtonSet, this, "lpApprovalExportButton"); 
      } 

      public function handleButtonSet(val:*):void 
      { 
       trace("button set to " + val); 
      } 
     ]]> 
    </fx:Script> 
</s:Application>

来源

2013-06-27 21:21:35 pbuchheit

错误元素顺序使用SkinnableContainer和状态

回答

相关问题