Question

当我使用SkinnableContainer的后代（例如BorderContainer）本身被包含或排除在状态时，处于默认状态的子元素以不正确的顺序显示。

使用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>

Answer 1

我认为问题与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。

Answer 2

我自己遇到过这个问题，我可以确认它似乎与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>

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

2 个答案: