css - 使用 CSS 在 Flex 4.5 中设计 Accordion 标题的样式

Question

我正在尝试使用 CSS 和 Flex 4.5 中的 headerStyleName 属性来设置 Accordion header 的样式，但 CSS 样式未显示。 Accordion 标题显示为与默认样式相同。这是我当前的代码。

Accordion .css:

.accHeader {
    fillColors: #dbf6c6, #e1facd;
    fillAlphas: 1.0, 0.5;
}

来自组件(不是主应用程序)的 MXML 代码:

...
<fx:Style source="skins/Accordion.css" />
<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion"
                      openDuration="500" headerStyleName="accHeader">
...

我也试过将 CSS 嵌入样式标签而不是链接到外部 CSS 文件，但结果是一样的。

此外，如果我更改不同的 CSS 属性，例如 color，更改会正确显示。

我也知道 chromeColor 属性，但这不是我想要实现的外观。我也没有完全决定使用 CSS，所以如果有另一种更好的方法来实现可定制的 Accordion header ，我完全赞成。我最初打算制作一个皮肤，但是当我在“新建 MXML 皮肤”对话框中没有看到正确的主机组件时就停止了。

任何能为我指明正确方向的信息将不胜感激。感谢您的宝贵时间!

Answer 1

甜蜜的胜利!

我能够使用 flexlib 成功地为 Accordion header 设置皮肤。并根据 AccordionHeaderSkin.mxml 创建自定义皮肤在 Flex 4.5 SDK 的源代码中找到。我做了一个CanvasButtonAccordionHeader用于标题渲染器并将其皮肤设置为新的自定义皮肤。

这是 AccordionHeaderSkin.mxml 的代码(不是我的最终风格，而是一个可工作的可编辑皮肤):

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
         minWidth="21" minHeight="21" alpha.disabled="0.5">

<fx:Script>
    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }
</fx:Script>

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
    <s:State name="selectedUp" />
    <s:State name="selectedOver" />
    <s:State name="selectedDown" />
    <s:State name="selectedDisabled" />
</s:states>

<!-- layer 3: fill -->
<s:Rect left="1" right="1" top="1" bottom="1">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0x000000" 
                             color.over="0xBBBDBD" 
                             color.down="0xAAAAAA" 
                             alpha="0.85" />
            <s:GradientEntry color="0xD8D8D8" 
                             color.over="0x9FA0A1" 
                             color.down="0x929496" 
                             alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 4: fill lowlight -->
<s:Rect left="1" right="1" top="1" bottom="1">
    <s:fill>
        <s:LinearGradient rotation="270">
            <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
            <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
            <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 5: fill highlight -->
<s:Rect left="1" right="1" top="1" bottom="1">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.0"
                             alpha="0.33" 
                             alpha.over="0.22" 
                             alpha.down="0.12"/>
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.48"
                             alpha="0.33"
                             alpha.over="0.22"
                             alpha.down="0.12" />
            <s:GradientEntry color="0xFFFFFF"
                             ratio="0.48001"
                             alpha="0" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 6: highlight stroke (all states except down) -->
<s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
    <s:stroke>
        <s:LinearGradientStroke rotation="90">
            <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
            <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>

<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.07" />
    </s:fill>
</s:Rect>
<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.07" />
    </s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="1" height="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.25" />
    </s:fill>
</s:Rect>
<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.09" />
    </s:fill>
</s:Rect>

<!-- layer 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
    <s:stroke>
        <s:SolidColorStroke color="0x696969" 
                            alpha="1" 
                            alpha.over="1" 
                            alpha.down="1" />
    </s:stroke>
</s:Rect>

然后是渲染器(AccordionHeader.mxml):

<?xml version="1.0" encoding="utf-8"?>
<CanvasButtonAccordionHeader xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            xmlns="flexlib.containers.accordionClasses.*" skin="AccordionHeaderSkin" height="25">

    <s:Group height="25">

    </s:Group>

</CanvasButtonAccordionHeader>

这是我的 Accordion :

<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion" openDuration="500" headerRenderer="AccordionHeader">