0

我正在尝试使用 CSS 和headerStyleNameFlex 4.5 中的属性设置 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 对话框中没有看到正确的主机组件时就停止了。

任何可以为我指明正确方向的信息将不胜感激。感谢您的时间！

4

1 回答 1

0

甜蜜的胜利！

我能够使用flexlibAccordionHeaderSkin.mxml成功地为 Accordion 标头设置皮肤，并根据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>

这是我的手风琴：

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

于 2011-06-23T17:29:28.107 回答