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

Question

我正在开发一个 flex 应用程序。该元素有一个带有声明的全局样式表:

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然后按回车或点击进入):

<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(我的示例在 pacakage 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"/>

你明白了: