flex 4.5 закругленные боковые кнопки - PullRequest
Новая
       21

flex 4.5 закругленные боковые кнопки

1 голос
/ 27 июля 2011

Я новичок в flex и обнаружил искровой метод смены скина кнопки.Я не решил проблему углов кнопок.Я просто хочу, чтобы левая и правая части кнопок были округлены, как полуэллипс.Также я хочу, чтобы при изменении размера кнопки стиль кнопки оставался таким, какой он есть (левая и правая части кнопок округлены как круг любого размера).Вы можете мне помочь?

Ответы [ 3 ]

4 голосов
/ 27 июля 2011

Вам на самом деле не нужно переопределять скин для этого.Вы можете просто использовать свойство cornerRadius следующим образом: 

<s:Button cornerRadius="{funButton.height/2}" id="funButton" label="SO Round!"/>
2 голосов
/ 09 сентября 2012

Я попытался сделать один для моего приложения.Похоже, этикетка не совсем выровнена. 

<?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>
1 голос
/ 27 июля 2011

Используйте это как родительский элемент вашей темы оформления кнопки.Он будет выглядеть как плоский серый прямоугольник без полей.Все, что вы добавите внутрь, будет отображаться как часть кнопки с закругленными углами.Настройте cornerRadius в соответствии с размером / высотой кнопки. 

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