改变视图状态的最佳做法是什么？

Question

我有一个组件有两个饼图，显示两个特定日期的百分比（认为开始和结束值）。但是，我有三个视图：仅限起始值，仅限终值或显示两者。我正在使用ToggleButtonBar来控制显示。改变这种视图状态的最佳做法是什么？现在（因为这段代码被继承了），视图状态在ActionScript函数中进行了更改，该函数根据ToggleButtonBar的selectedIndex在每个饼图上设置visible和includeInLayout属性，但是，这看起来并不是最好的方式做到这一点 - 不是很有活力。我希望能够根据selectedItem的名称更改状态，以防ToggleButtons的顺序发生变化，并且我将存储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> 

Answer 1

由于currentState属性需要一个字符串，该字符串映射到状态的name属性，所以它听起来像使用<mx:states>在您的情况下可以很好地工作。事实上，我使用的状态往往是在短短您所描述的方式视图之间切换 - 设置与组件的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> 

...以下这个一般模式。希望能帮助到你！

Answer 2

要做到这一点是使用了ViewStack组件的最简单方法。这样你只需选择selectedIndex，所有其他面板就会隐藏（注意ViewStacks的初始化问题）。

由于过去ViewStacks存在的问题，我可能倾向于使用视图状态作为替代方案。各国都有自己的问题，但对于这个特殊问题他们肯定是可行的。

如果我是你，我会考虑这些选项作为解决方案，因为创建的功能已经使用标准api创建....尝试并坚持使用mx组件，只要它们符合您的特定需求而不是始终重新发明轮子

Answer 3

在第一个组件中使用状态完全忽略了这一点。你不应该设置visible和includeInLayout，你应该使用AddChild和RemoveChild来添加和删除组件。使用visible和includeInLayout来控制对象在屏幕上的状态是他们意图的混蛋。不幸的是，由于Flex没有任何条件逻辑标签甚至条件属性来添加/删除元素，人们通常会回退这两个标签。有时候这是唯一实际的事情，但在你的情况下，或者在你有'switch'语句的任何情况下，你肯定想要使用状态。