flex 4.5 圆形侧边按钮答案

【问题标题】：flex 4.5 rounded side buttonsflex 4.5 圆形侧边按钮
【发布时间】：2011-07-26 20:10:30
【问题描述】：

我是 flex 的新手，我发现了改变按钮皮肤的 spark 方法。我还没有解决按钮角的问题。我只希望按钮的左侧和右侧像半椭圆一样圆润。我还希望当我更改按钮的大小时，按钮的样式保持原样（按钮的左侧和右侧像任何大小的圆圈一样圆润）。你能帮帮我吗？

【问题讨论】：

标签： flash apache-flex button adobe skin

【解决方案1】：

您实际上不需要为此覆盖皮肤。您可以像这样使用“cornerRadius”属性：

<s:Button cornerRadius="{funButton.height/2}" id="funButton" label="SO Round!"/>

【讨论】：

它工作了，但是如果我给按钮添加内部发光，它会再次工作而没有错误吗？圆角也会有发光效果吗？
如果你查看皮肤的源代码，if (cornerRadius != cr) { cornerRadius = cr; shadow.radiusX = cornerRadius; fill.radiusX = cornerRadius; lowlight.radiusX = cornerRadius; highlight.radiusX = cornerRadius; border.radiusX = cornerRadius; } 它显示半径随着样式的更新而更新。因此，它应该可以正常工作。

【解决方案2】：

我尝试为我的应用制作一个。看起来标签没有完全对齐。

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="up" />
    </s:states>

    <s:Group height="100%" width="100%" verticalCenter="0">
        <s:Ellipse height="100%" width="100%" >
            <s:fill>
                <s:LinearGradient rotation="90" scaleX.disabled="-65">
                    <s:GradientEntry color="0x999999" color.up="0x666666" color.disabled="0xFFFFFF" ratio.disabled="0"/>
                    <s:GradientEntry color="0x828282" color.up="0x333333" color.disabled="0x828282" ratio.disabled="1"/>
                    <s:GradientEntry color="0x999999" color.up="0x666666" color.disabled="0xFFFFFF" ratio.disabled="0"/>
                </s:LinearGradient>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke weight="5" caps="none" joints="miter" miterLimit="10" color="#FFFFFF"/>
            </s:stroke>
            <s:filters>
                <s:DropShadowFilter distance="1" angle="90" blurX="6" blurY="6" alpha="0.75"/>
            </s:filters>
        </s:Ellipse>

        <s:Label id="labelDisplay" verticalCenter="0" color="#FFFFFF" horizontalCenter="0" width="70%" textAlign="center">
        </s:Label>      
    </s:Group>
</s:SparkButtonSkin>

【讨论】：

【解决方案3】：

将其用作按钮外观的父元素。它将显示为一个平坦的灰色无边框矩形。您在其中添加的任何内容都将显示为带有圆角的按钮的一部分。调整cornerRadius以适合按钮的大小/高度。

<s:BorderContainer height="100%" width="100%" 
   backgroundColor="#DDDDDD" borderColor="#DDDDDD" 
   cornerRadius="10"
   >
   <s:layout><s:BasicLayout /></s:layout>
</s:BorderContainer>

【讨论】：

cornerRadius="10" 表示当我改变按钮的大小时，按钮左右两侧将不再看起来像一个圆圈