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属性的String，因此使用<mx:states>听起来好像适用于您的情况。实际上，我通常使用状态来按照您描述的方式在视图之间切换 - 使用SetProperty设置组件的可见和includeInLayout属性（通常是Canvas组件或其他类型的容器）：

<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'语句的情况下，你肯定想要使用状态。

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

3 个答案: