Question

我是flex的新手，我发现了按钮皮肤变化的火花方法。我还没有解决按钮角落的问题。我只是希望按钮的左右两侧像半椭圆一样圆润。另外我希望当我改变按钮的大小时，按钮的样式保持原样（按钮的左右两侧像任意大小的圆形一样圆形）。你能救我吗？

Answer 1

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

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

Answer 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>

Answer 3

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

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

flex 4.5圆形侧按钮

3 个答案: