如何向应用程序添加背景渐变？

Question

我是Flex新手并且正在将一个纯Flash / AS3应用程序移植到Flex 4.5。

在my original Flash/AS3 application中，我有一个Sprite充当背景。我将它放在所有其他DisplayObject下面，并用随机颜色的线性渐变填充它。它看起来不错，似乎与Flash组件（按钮，复选框，TexFields）配合得很好，因为它们是透明的。

所以在我的新Flex程序（使用BasicLayout）中，我也试过创建一个Rect：

<s:Rect left="0" top="0" right="0" bottom="0">
    <s:stroke>
        <s:LinearGradientStroke id="_bgcolor" rotation="90" weight="1">
            <s:GradientEntry color="0x33FFFF" alpha="0.55" />
            <s:GradientEntry color="0x99FFFF" alpha="0.2475" />
        </s:LinearGradientStroke>
    </s:stroke>
</s:Rect>   

但这不能很好地工作，Rect被其他Flex组件遮挡：

是否有一种快速方法可以向Flex应用程序添加背景渐变（像 backgroundColor =“＃CCCCCC”那样简单）或者我是否必须研究“皮肤文档”（并且会剥皮）这里的应用程序帮助，因为问题似乎是Flex组件是不透明的？）

Answer 1

看起来默认的白色背景会覆盖您的自定义Rect。

尝试添加contentBackgroundAlpha="0"以隐藏组件背景而不会弄乱外观。

Answer 2

您使用<stroke>代替<fill>

<s:Rect left="0" top="0" right="0" bottom="0">
    <s:fill>
        <s:LinearGradient id="_bgcolor" rotation="90">
            <s:GradientEntry color="0x33FFFF" alpha="0.55" />
            <s:GradientEntry color="0x99FFFF" alpha="0.2475" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

Answer 3

您缺少内容组

<s:Group id="chrome" left="0" right="0" top="0" bottom="0" visible.closedGroup="false">

    <s:Rect left="0" top="0" right="0" bottom="0">
              <s:fill>
                    <s:LinearGradient id="_bgcolor" rotation="90">
                       <s:GradientEntry color="0x33FFFF" alpha="0.55" />
                       <s:GradientEntry color="0x99FFFF" alpha="0.2475" />
                   </s:LinearGradient>
               </s:fill>
            </s:Rect>
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
</s:Group>