在 Flex 4.5 中使用 CSS 设计 Accordion 标题答案

【问题标题】：Styling Accordion Headers in Flex 4.5 with CSS在 Flex 4.5 中使用 CSS 设计 Accordion 标题
【发布时间】：2011-06-22 21:59:35
【问题描述】：

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

手风琴.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 标题，我完全赞成。我最初打算制作一个皮肤，但是当我在 New MXML Skin 对话框中没有看到正确的主机组件时就停止了。

非常感谢任何可以为我指明正确方向的信息。感谢您的宝贵时间！

【问题讨论】：

标签： css header accordion flex4.5

【解决方案1】：

甜蜜的胜利！

我能够使用 flexlib 成功地为 Accordion 标头设置皮肤，并根据 Flex 4.5 SDK 源代码中的 AccordionHeaderSkin.mxml 创建自定义皮肤。我为标题渲染器创建了一个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>

这是我的手风琴：

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

【讨论】：