Apache flex 更改视图状态的最佳做法是什么？

我有一个包含两个饼图的组件，显示两个特定日期的百分比（想想开始值和结束值）。但是，我有三个视图：仅开始值、仅结束值或同时显示。我正在使用一个ToggleButtonBar来控制显示。更改这种视图状态的最佳实践是什么？现在（由于这段代码是继承的），视图状态在ActionScript函数中发生了更改，该函数根据ToggleButtonBar的selectedIndex设置每个饼图上的visible和includeInLayout属性，但是，这似乎不是最好的方法——不是很动态。我希望能够根据selectedItem的名称更改状态，以防切换按钮的顺序发生变化，并且因为我正在存储selectedItem的名称以供将来参考

使用国家会更好吗？如果是的话，实施这一点的最佳方式是什么

谢谢

当前逻辑：

private function pieTypeToggleButtonBar_itemClickHandler():void
{
    // Show/Hide the appropriate Pie Charts based on the user's selection
    switch (pieTypeToggleButtonBar.selectedIndex)
    {
        // "Start Value" is selected
        case 0:
        {
            // Hide the End Value Pie Chart
            endValuePieChartVBox.visible = false;
            endValuePieChartVBox.includeInLayout = false;

            // Show the Start Value Pie Chart
            startValuePieChartVBox.includeInLayout = true;
            startValuePieChartVBox.visible = true;

            break;
        }
        // "End Value" is selected
        case 1:
        {
            // Hide the Start Value Pie Chart
            startValuePieChartVBox.visible = false;
            startValuePieChartVBox.includeInLayout = false;

            // Show the End Value Pie Chart
            endValuePieChartVBox.includeInLayout = true;
            endValuePieChartVBox.visible = true;

            break;
        }
        // "Both" is selected
        case 2:
        {
            // Show the Start Value Pie Chart
            startValuePieChartVBox.includeInLayout = true;
            startValuePieChartVBox.visible = true;

            // Show the End Value Pie Chart
            endValuePieChartVBox.includeInLayout = true;
            endValuePieChartVBox.visible = true;

            break;
        } 
    }
}

<mx:ToggleButtonBar id="pieTypeToggleButtonBar" selectedIndex="1" 
    itemClick="pieTypeToggleButtonBar_itemClickHandler()">
    <mx:Array>
        <mx:Object name="startValue" label="Start Value" />

        <mx:Object name="endValue" label="End Value" />

        <mx:Object name="both" label="Both" />
    </mx:Array>
</mx:ToggleButtonBar>

私有函数pieTypeToggleButtonBar\u itemClickHandler（）：void
{
//根据用户的选择显示/隐藏相应的饼图
开关（pieTypeToggleButtonBar.selectedIndex）
{
//选择“开始值”
案例0：
{
//隐藏结束值饼图
endValuePieChartVBox.visible=假；
endValuePieChartVBox.includeInLayout=false；
//显示起始值饼图
startValuePieChartVBox.includeInLayout=true；
startValuePieChartVBox.visible=true；
打破
}
//选择“结束值”
案例1：
{
//隐藏起始值饼图
startValuePieChartVBox.visible=false；
startValuePieChartVBox.includeInLayout=false；
//显示结束值饼图
endValuePieChartVBox.includeInLayout=true；
endValuePieChartVBox.visible=真；
打破
}
//选择“两者”
案例2：
{
//显示起始值饼图
startValuePieChartVBox.includeInLayout=true；
startValuePieChartVBox.visible=true；
//显示结束值饼图
endValuePieChartVBox.includeInLayout=true；
endValuePieChartVBox.visible=真；
打破
} 
}
}

最简单的方法是使用ViewStack组件。这样，您只需选择selectedIndex，所有其他面板都将隐藏（请注意ViewStack的初始化问题）

由于我过去在ViewStack方面遇到的问题，我可能倾向于使用视图状态作为替代。各州都有自己的问题，但对于这个特殊的问题，它们肯定是可行的

---

如果我是你，我会研究这些选项中的任何一个作为解决方案，因为创建的功能已经用标准api创建了。。。。如果mx组件适合您的特定需要，请尝试并坚持使用它们，而不是一直重复使用轮子。最简单的方法是使用ViewStack组件。这样，您只需选择selectedIndex，所有其他面板都将隐藏（请注意ViewStack的初始化问题）

由于我过去在ViewStack方面遇到的问题，我可能倾向于使用视图状态作为替代。各州都有自己的问题，但对于这个特殊的问题，它们肯定是可行的

---

如果我是你，我会研究这些选项中的任何一个作为解决方案，因为创建的功能已经用标准api创建了。。。。如果mx组件符合您的特定需求，请尝试并坚持使用它们，而不是一直重复使用它们

，因为currentState属性接受一个字符串，该字符串映射到一个状态的name属性，那么在您的情况下使用

听起来会很好。事实上，我经常按照您描述的方式使用状态在视图之间切换——使用SetProperty设置组件（通常是画布组件或其他种类的容器）的visible和includeInLayout属性：

<mx:states>
    <mx:State name="View State 1">
        <mx:SetProperty target="{component1}" name="visible" value="true" />
        <mx:SetProperty target="{component2}" name="visible" value="false" />
        <mx:SetProperty target="{component3}" name="visible" value="false" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="true" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="false" />
    </mx:State>
    <mx:State name="View State 2">
        <mx:SetProperty target="{component1}" name="visible" value="false" />
        <mx:SetProperty target="{component2}" name="visible" value="true" />
        <mx:SetProperty target="{component3}" name="visible" value="false" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="true" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="false" />
    </mx:State>
    <mx:State name="View State 3">
        <mx:SetProperty target="{component1}" name="visible" value="false" />
        <mx:SetProperty target="{component2}" name="visible" value="false" />
        <mx:SetProperty target="{component3}" name="visible" value="true" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="true" />
    </mx:State>
</mx:states>

<mx:Script>
    <![CDATA[

        import mx.binding.utils.BindingUtils;
        import mx.binding.utils.ChangeWatcher;

        private function this_creationComplete(event:Event):void
        {
                // Use BindingUtils.bindSetter to hook into selectedIndex-change events
            var cw:ChangeWatcher = BindingUtils.bindSetter(setState, myBar, "selectedIndex");
        }

        private function setState(index:int):void
        {
            currentState = myBar.getChildren()[index].label;
        }

    ]]>
</mx:Script>

<mx:ToggleButtonBar id="myBar">
    <mx:dataProvider>
        <mx:Array>
            <mx:String>View State 1</mx:String>
            <mx:String>View State 2</mx:String>
            <mx:String>View State 3</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:ToggleButtonBar>

<mx:Canvas id="component1">
    <mx:Text text="Component 1" />
</mx:Canvas>

<mx:Canvas id="component2">
    <mx:Text text="Component 2" />
</mx:Canvas>

<mx:Canvas id="component3">
    <mx:Text text="Component 3" />
</mx:Canvas>

视图状态1
视图状态2
视图状态3

---

。。。遵循这一一般模式。希望有帮助

由于currentState属性接受一个字符串，该字符串映射到一个状态的name属性，因此在您的情况下，使用

听起来很合适。事实上，我经常按照您描述的方式使用状态在视图之间切换——使用SetProperty设置组件（通常是画布组件或其他种类的容器）的visible和includeInLayout属性：

<mx:states>
    <mx:State name="View State 1">
        <mx:SetProperty target="{component1}" name="visible" value="true" />
        <mx:SetProperty target="{component2}" name="visible" value="false" />
        <mx:SetProperty target="{component3}" name="visible" value="false" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="true" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="false" />
    </mx:State>
    <mx:State name="View State 2">
        <mx:SetProperty target="{component1}" name="visible" value="false" />
        <mx:SetProperty target="{component2}" name="visible" value="true" />
        <mx:SetProperty target="{component3}" name="visible" value="false" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="true" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="false" />
    </mx:State>
    <mx:State name="View State 3">
        <mx:SetProperty target="{component1}" name="visible" value="false" />
        <mx:SetProperty target="{component2}" name="visible" value="false" />
        <mx:SetProperty target="{component3}" name="visible" value="true" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="true" />
    </mx:State>
</mx:states>

<mx:Script>
    <![CDATA[

        import mx.binding.utils.BindingUtils;
        import mx.binding.utils.ChangeWatcher;

        private function this_creationComplete(event:Event):void
        {
                // Use BindingUtils.bindSetter to hook into selectedIndex-change events
            var cw:ChangeWatcher = BindingUtils.bindSetter(setState, myBar, "selectedIndex");
        }

        private function setState(index:int):void
        {
            currentState = myBar.getChildren()[index].label;
        }

    ]]>
</mx:Script>

<mx:ToggleButtonBar id="myBar">
    <mx:dataProvider>
        <mx:Array>
            <mx:String>View State 1</mx:String>
            <mx:String>View State 2</mx:String>
            <mx:String>View State 3</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:ToggleButtonBar>

<mx:Canvas id="component1">
    <mx:Text text="Component 1" />
</mx:Canvas>

<mx:Canvas id="component2">
    <mx:Text text="Component 2" />
</mx:Canvas>

<mx:Canvas id="component3">
    <mx:Text text="Component 3" />
</mx:Canvas>

视图状态1
视图状态2
视图状态3

---

。。。遵循这一一般模式。希望有帮助

在第一个组件中使用状态完全没有抓住要点。您不应该设置visible和includeInLayout，应该使用AddChild和RemoveChild添加和删除组件。使用visible and includeInLayout来控制屏幕上对象的状态是对其意图的一种卑劣化。不幸的是，由于Flex没有任何类型的条件逻辑标记，甚至没有条件属性来添加/删除元素，人们通常会依赖这两个标记。有时候，这是唯一实际可行的做法，但实际上