Question

正如标题所述，更改Flex ToggleButtonBar上的labelField会导致所有样式消失。只有在再次单击按钮后才会重新显示。有人可以提供修复吗？

注意我正在使用Flex 3.6。您可以使用下面的代码查看行为。单击任一按钮以更改标签字段，在栏中，所选按钮的样式将消失：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
            layout="vertical">

<mx:Style>

    .myStyle 
    {   
        buttonStyleName: "tabStyle";
        selectedButtonTextStyleName: "tabTextSelected";
    }

    .tabStyle 
    {   
        color: #000000;
    }

    .tabTextSelected
    {
        color: #FF0000;
    }   

</mx:Style>

<mx:ToggleButtonBar id="myToggleButtonBar" styleName="myStyle"
                    labelField="title0">

    <mx:dataProvider>
        <mx:Object title0="Apple" title1="Pomme" />
        <mx:Object title0="Cherry" title1="Cerise" /> 
    </mx:dataProvider>

</mx:ToggleButtonBar>

<mx:Button label="title0" click="{myToggleButtonBar.labelField = 'title0' }" /> 
<mx:Button label="title1" click="{myToggleButtonBar.labelField = 'title1' }" /> 

</mx:Application>

Answer 1

我认为这里的问题不是样式丢失，而是当你更改labelField时ToggleButtonBar正在重置它的selectedIndex属性（重置所选标签）。当你改变选项卡的dataProvider之类的东西（或影响从dataProvider中提取标签的方式的东西）时，这似乎是公平的事情。

解决方案：在您更改labelField之前，请获取selectedIndex并在ToggleButtonBar上重新设置：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="vertical">

    <mx:Style>

        .myStyle 
        {   
            buttonStyleName: "tabStyle";
            selectedButtonTextStyleName: "tabTextSelected";
        }

        .tabStyle 
        {   
            color: #000000;
        }

        .tabTextSelected
        {
            color: #FF0000;
        }

    </mx:Style>
    <mx:Script>
        <![CDATA[
            private function toggleLabelField():void
            {
                var currentLabelField:String = myToggleButtonBar.labelField;
                var currentTab:int = myToggleButtonBar.selectedIndex;
                trace("selectedIndex before changing labelField: " + currentTab);
                var newLabelField:String = currentLabelField == 'title0' ? 'title1' : 'title0';
                myToggleButtonBar.labelField = newLabelField;
                trace("selectedIndex after changing labelField: " + myToggleButtonBar.selectedIndex);
                myToggleButtonBar.selectedIndex = currentTab;
            }
        ]]>
    </mx:Script>

    <mx:ToggleButtonBar id="myToggleButtonBar" styleName="myStyle"
                        labelField="title0">

        <mx:dataProvider>
            <mx:Object title0="Apple" title1="Pomme" />
            <mx:Object title0="Cherry" title1="Cerise" /> 
        </mx:dataProvider>

    </mx:ToggleButtonBar>

    <mx:Button label="title0" click="{myToggleButtonBar.labelField = 'title0' }" /> 
    <mx:Button label="title1" click="{myToggleButtonBar.labelField = 'title1' }" />
    <mx:Button label="toggle it" click="toggleLabelField()" />

</mx:Application>

在Flex ToggleButtonBar上更改labelfield会丢失CSS样式

1 个答案: