FLEX 4(Gumbo)教程之按钮(二) 大 | 中 | 小

  停了几天，继续。
         首先你需要看的是第一篇关于FLEX4按钮的文章:http://www.uncool.cn/blogs/read.php?257
         如果你看过了，那么我们就可以继续了。

---

        这次我们需要实现的是按钮样式的渐变模式，在开始之前，说个小技巧，就是我们知道如果要给Gumbo 按钮加标签是需要在SKIN设置里加好的，那么我们该如何像一般Button那样的加Label属性呢？其实很简单，只要在SKIN里把上一篇最后的代码改成
      

<gumbo:Group verticalCenter="0" horizontalCenter="0">
    <TextBox text="{data.label}"/>
  </gumbo:Group>

        这样回到主MAIN文件下，只要像传统的Button那样加标签就可以了，比如：Label="新的按钮"

        我们已经知道了单色的SKIN制作方法，但是如何使用渐变呢？就是把gumbo:fill里的东西变变就成，唯一的麻烦你需要不停的调整颜色对应。
        我们需要在原先的代码里把
        

<!--UP状态的-->
<SolidColor color="0xff0000" />
<!--改成-->
<LinearGradient  rotation="-90" >
                 <GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                 <GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                 <GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                <GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>
</LinearGradient>

<!--OVER状态的-->
<SolidColor color="0xffff00" />
<!--改成-->
<LinearGradient  rotation="90" >
                 <GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                 <GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                 <GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                <GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>
</LinearGradient>

<!--DOWN状态的-->
<SolidColor color="0x00ff00" />
<!--改成-->
<LinearGradient rotation="-90" >
                 <GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                 <GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                 <GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                 <GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>
</LinearGradient>

        这样就变成了一个有渐变样式的SKIN，如下图