如何在Flex中创建垂直渐变

Question

如何在flex中创建垂直渐变。

我目前拥有的是水平颜色渐变。 而且工作正常。 但是我无法弄清楚应该如何使其垂直（当然这是必需的）

我使用styleName =“ chatWindowLeftGradient”

<mx:VBox id="chatTabBarVBox" height="100%" styleName="chatWindowLeftGradient">

</mx:VBox> 

样式表如下所示：

<mx:Style>
        .chatWindowLeftGradient{                        
            backgroundImage: ClassReference("custom.GradientBackground");
            backgroundSize: "100%";
            fillColors: #6db263, #a4d9a1;
            fillAlphas: 1, 1;                           
        }

    </mx:Style>

这给出了从上到下的渐变。 我怎样才能从左到右？

问候Zeeshan

Answer 1

这不仅会插入您的CSS，而且Flex 4 mxml中的垂直渐变如下所示：

<s:Rect right="0" top="0" width="170" bottom="0">
    <s:fill>
        <mx:LinearGradient rotation="90">
            <mx:entries>
                <mx:GradientEntry color="#64574A"/>
                <mx:GradientEntry color="#FFFFCC"/>
            </mx:entries>
        </mx:LinearGradient>
    </s:fill>
</s:Rect>

您是否尝试过在样式中添加一个rotation =“ 90”？

Answer 2

您可以使用程序化皮肤进行操作。

1. 创建一个继承自Border的新类。

2. 用类似下面的内容覆盖updateDisplayList：

   super.updateDisplayList（w，h）;
   var g：Graphics = this.graphics;

   g.clear（）;

   var m：Matrix = new Matrix（）; m.createGradientBox（w，h）; g.lineStyle（0,0,0）; g.beginGradientFill（GradientType.LINEAR，[color1，color2]，[alpha1，alpha2]​​，[0,0xFF]，m）; g.drawRect（0,0，w，h）; g.endFill（）;

3. 使用样式部分中的ClassReference将此类作为您的皮肤引用。

Answer 3

在Flex 3中，将渐变应用于元素的最简单方法是使用Degrafa及其出色的CSSSkin类。 此处提供了一些很好的灵活性示例： CSSSkin的漂亮和简单渐变