Question

我希望将状态赋予应用程序的元素，最好是，而不是为阳光下的所有内容创建组件。

我在这里包含了一个尝试这个的示例（应用程序有两个状态;两个BorderContainers代表这两个，在这些BorderContainers中，我希望有多个可控状态）。

我收到的错误如下：

组件无法在状态＆＃39; a1b1＆＃39;因为祖先被排除在＆＃39; a1b1＆＃39;。
之外

和

属性的初始化程序＆＃39;状态＆＃39;这里不允许

下面的代码。

<?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" applicationDPI="160"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               currentState="a1"
               >
    <s:states>
        <s:State name="a1" />
        <s:State name="a2" />
    </s:states>

    <s:BorderContainer includeIn="a1" top="100" height="60" currentState="a1b1" id="a1c">
        <s:states>
            <s:State name="a1b1" />
            <s:State name="a1b2" />
        </s:states>
        <s:Button includeIn="a1b1" label="s1b1" fontSize="16" height="35" right="10" top="10" />
        <s:Button includeIn="a1b2" label="s1b2" fontSize="16" height="35" right="10" top="30" />
    </s:BorderContainer>

    <s:BorderContainer includeIn="a2" top="150" height="60" currentState="a2b1" id="a2c">
        <s:states>
            <s:State name="a2b1" />
            <s:State name="a2b2" />
        </s:states>
        <s:Button includeIn="a2b1" label="s2b1" fontSize="16" height="35" right="10" top="10" />
        <s:Button includeIn="a2b2" label="s2b2" fontSize="16" height="35" right="10" top="30" />
    </s:BorderContainer>
    <s:Button label="s1" fontSize="16" height="35" right="10" top="10" click="currentState='a1';"/>
    <s:Button label="s2" fontSize="16" height="35" right="10" top="50" click="currentState='a2';"/>
</s:Application>

我只是想弯腰去做一些它不做的事情吗？对于实现类似目标的最佳实践的建议是有帮助的，但任何可以告诉我如何强制这种方式起作用，理想或不合适的方法都会更好。

谢谢！

Answer 1

最佳做法是基于spark BorderContainer创建可重用的自定义组件。

现在是第一个错误：

组件无法在状态＆＃39; a1b1＆＃39;因为一个祖先被排除在＆＃39; a1b1＆＃39;。
之外

这是因为 a1c BorderContainer有一个currentState="a1b1"但包含在另一个州includeIn="a1"中。

第二个错误：

属性的初始化程序＆＃39;状态＆＃39;这里不允许

你不能像这样

在声明的组件中定义状态数组

<s:states>
    <s:State name="a1b1" />
    <s:State name="a1b2" />
</s:states>

就像在他的一个实例中创建一个新的类属性一样。

所以，最好的方法是做这样的事情：

自定义BorderContainer组件： CustomBorderContainer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" 
                   width="400" height="300">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
        <s:states>
            <s:State name="a1b1" />
            <s:State name="a1b2" />
        </s:states>

    <s:Button includeIn="a1b1" label="s1b1" fontSize="16" height="35" right="10" top="10" />
    <s:Button includeIn="a1b2" label="s1b2" fontSize="16" height="35" right="10" top="30" />

</s:BorderContainer>

并像这样使用它：

<?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" applicationDPI="160"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:local="*"
               currentState="a1" >
    <s:states>
        <s:State name="a1" />
        <s:State name="a2" />
    </s:states>

    <local:CustomBorderContainer includeIn="a1" top="100" id="a1c" />
    <local:CustomBorderContainer includeIn="a2" top="150" id="a2c" />

    <s:Button label="s1" fontSize="16" height="35" right="10" top="10" click="currentState='a1';"/>
    <s:Button label="s2" fontSize="16" height="35" right="10" top="50" click="currentState='a2';"/>
</s:Application>

最终结果如下：

enter image description here

Flex / MXML：各州内的州？

1 个答案: