DropDownList 和 DataGroup 之间的 Flex 4.6 颜色样式冲突

Question

我正在开发一个弹性应用程序。该项目有一个带有声明的全局样式表：

s|DataGroup{
    alternating-item-colors:#FFFFFF,#F7F7FA;
}

现在，在我的一个对话框中，我想要一个具有不同配色方案的 DropDownList。我尝试了很多方法，使用属性并为我的 DropDownList 使用样式。

<s:DropDownList id="orientationEntry" width="200"
                dataProvider="{model.orientationList}"
                styleName="blackDropDown"
                alternatingItemColors="[#222222,#111111]"
                >

在我的样式表中（我尝试了许多不同的东西）：

.blackDropDown s|DataGroup {
    alternating-item-colors: #222222,#111111;
}

#orientationEntry s|DataGroup {
    alternating-item-colors: #222222,#111111;
}

s|DropDownList#orientationEntry s|DataGroup {
    alternating-item-colors: #222222,#111111;
}

但是这些都没有任何效果。我的下拉列表始终显示白色和浅灰色线条。为了使其工作（即有黑色和深灰色线条），我需要从全局样式表中删除 s|DataGroup 声明。但我想避免这种情况。对于更具体的情况，不能覆盖一般声明，我有点惊讶。

所以问题是：如何在不重新定义应用程序所有数据组的默认颜色的情况下覆盖 DropDownList 弹出列表的背景颜色？

或者，如何在不更改全局样式表的情况下取消全局 s|DataGroup 声明？

Answer 1

我认为你可以通过 as3 设置它，但如果你想要这个可重用的方法是：

基于 DropDownList 创建一个新的 MXML 皮肤。

搜索（在某些编辑器中CTRL+O，输入scroller，然后按ENTER或单击即可）：

<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
                    </s:layout>
                </s:DataGroup> 
            </s:Scroller>

设置指定颜色的属性：

alternatingItemColors="{[0x222222, 0x111111]}"

你现在有这个：

<!--- @private -->
            <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                <s:DataGroup id="dataGroup" alternatingItemColors="{[0x222222, 0x111111]}" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
                    </s:layout>
                </s:DataGroup> 
            </s:Scroller>

现在只需在您的组件中设置 skinClass（我的示例在包中 skins）：

<s:DropDownList id="ddlFiltros" width="237" height="30" buttonMode="true"

skinClass="skins.skin_dropdown"

dataProvider="{_arrayCamposFiltro}" labelField="label"
prompt="ELEGIR CAMPO" selectedIndex="-1"/>

这不影响全局样式。

不过，您可以按照自己的风格进行设置：

s|DataGroup{
    alternating-item-colors:#FFFFFF,#F7F7FA;
}

.blackDropDown {
    skinClass: ClassReference("skins.skin_dropdown");
}

而不是定义 skinClass，而是定义 styleName：

<s:DropDownList id="ddlFiltros" width="237" height="30" buttonMode="true" 

styleName="blackDropDown"

dataProvider="{_arrayCamposFiltro}" labelField="label"
prompt="ELEGIR CAMPO" selectedIndex="-1"/>

你明白了：