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

你可以使用程序化皮肤来完成它。

创建一个继承自Border的新类。
用以下内容覆盖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（）;
使用样式部分中的ClassReference引用此类作为您的皮肤。

Answer 3

在Flex 3中，将渐变应用于元素的最简单方法是使用Degrafa及其出色的CSSSkin类。其灵活性的一些很好的例子如下：Nice and Easy Gradients with CSSSkin

如何在flex中创建垂直渐变

3 个答案: