flex 4.5 圆形侧按钮

发布于 2024-11-26 04:36:17 字数 132 浏览 2 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难如初 2024-12-03 04:36:17

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

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

You actually don't need to override the skin for that. You can just use the "cornerRadius" property like so:

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

回复收藏 0 原文

摇划花蜜的午后 2024-12-03 04:36:17

我尝试为我的应用程序制作一个。看起来标签不太对齐。

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

I have tried to make one for my app. Looks like the label is not quite aligned.

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

回复收藏 0 原文

谁与争疯 2024-12-03 04:36:17

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

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

Use this as the parent element of your button skin. It will appear as a flat gray borderless rectangle. Anything you add inside of it will appear as part of the button with rounded corners. Adjust the cornerRadius to suit the size/height of the button.

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

回复收藏 0 原文

~没有更多了~