0

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

使用States会更好吗？如果是这样，实现这一点的最佳方法是什么？

谢谢。

当前逻辑：

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>
4

3 回答 3

2

由于 currentState 属性采用一个字符串，该字符串映射到一个状态的 name 属性，因此听起来 using<mx:states>在您的情况下会很好用。事实上，我经常使用状态来以您描述的方式在视图之间切换——使用 SetProperty 设置组件（通常是 Canvas 组件或其他类型的容器）的可见和 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>

...遵循这种一般模式。希望能帮助到你！

于 2009-01-29T15:44:11.613 回答
1

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

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

如果我是你，我会考虑将这些选项中的任何一个作为解决方案，因为创建的功能已经使用标准 api 创建......如果它们符合您的特定需求，请尝试坚持使用 mx 组件，而不是重新发明轮子每时每刻

于 2009-01-29T15:27:44.453 回答
1

在第一个组件中使用状态完全没有抓住重点。您不应该设置可见和 includeInLayout，您应该使用 AddChild 和 RemoveChild 添加和删除组件。使用 visible 和 includeInLayout 来控制屏幕上对​​象的状态是他们意图的混蛋。不幸的是，由于 Flex 没有任何类型的条件逻辑标签，甚至没有用于添加/删除元素的条件属性，人们经常依赖这两个标签。有时这是唯一可行的做法，但在您的情况下或在任何有“switch”语句的情况下，您肯定想要使用状态。

于 2009-02-26T20:46:47.950 回答