FLEX4.6颜色风格DropDownList与DataGroup的冲突

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，编写滚动体并按ENTER或单击go)：

<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 (我的示例在填充外观中)：

<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"/>

你明白这个：

​

​