如何具有關於Flex 4 TextInput組件cornerradius

Question

如何Flex 4中

<s:TextInput prompt="username" width="150" maxChars="100" id="txt_username" 
    color="#000000"/> 

Answer 1

創建自定義外觀（可能是通過複製火花TextInputSkin）獲得角球半徑在我的TextInput組件，並添加邊框圖形帶有圓角，就像這樣：

<!-- border --> 
<s:Rect id="border" left="0" right="0" top="0" bottom="0" 
     radiusX="10" radiusY="10"> 

    <s:stroke> 
     <s:SolidColorStroke id="borderStroke" weight="1" /> 
    </s:stroke> 
</s:Rect> 

如果您想了解更多特殊的圓角，您還可以使用這些屬性：

topLeftRadiusX="4" topLeftRadiusY="8" 
bottomLeftRadiusX="2" bottomRightRadiusY="10" 

默認的TextInputSkin不允許圓角，所以沒有可以在TextInput上設置的樣式。所以，不，除了創建一個自定義皮膚類以外別無他法。

Answer 2

你可以更進一步，讓它動態。創建一個基於Spark TextInputSkin的自定義TextInputSkin，並在updateDisplayList方法中將該代碼添加到super.updateDisplayList（）調用的上方。

在YourTextInputSkin.mxml，

// in updateDisplayList() 
if (getStyle("cornerRadius")!==undefined) { 
    border.radiusX = border.radiusY = getStyle("cornerRadius"); 
    background.radiusX = background.radiusY = getStyle("cornerRadius"); 
} 

就是這樣。你完成了！

我們使用它添加CSS類選擇添加cornerRadius樣式像這樣：

/* set the Textinput.styleName to this style */ 

s|TextInput.roundedInput 
{ 
    contentBackgroundAlpha: .4; 
    contentBackgroundColor: #000000; 
    cornerRadius:   10; 
    skinClass:    ClassReference("view.skins.TextInputRoundedSkin"); 
} 

而且您的實例設置爲分類，

<s:TextInput styleName="roundedInput"/> 

不幸的是，你不能設置MXML中TextInput組件實例上的cornerRadius樣式。 Flex是否應該支持HTML標籤這種類型的東西的樣式標籤？應該在皮膚中聲明的樣式是否使用它們代理組件？目前，如果您在Skin中聲明樣式並嘗試在組件實例上使用它，即使可以在CSS中聲明該樣式和任何其他樣式，Flex編譯器也會引發錯誤。如果UIComponent有一個可以設置樣式的樣式代理對象呢？無論如何，我離題了。

如果您想在TextInput實例上使用該樣式，除了以前的方法，您可以通過擴展TextInput並向其添加cornerRadius樣式元數據來實現。您也可以在設置skinClass（內聯或庫中的defaults.css文件）時設置它。

事情是這樣的：

<?xml version="1.0" encoding="utf-8"?> 
<s:TextInput xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      skinClass="TextInputRoundedSkin" > 
    <fx:Metadata> 
     [Style(name="cornerRadius", inherit="no", type="uint")] 
    </fx:Metadata> 
</s:TextInput> 

要使用，

<local:MyExtendedTextInput cornderRadius="8" /> 

以後你就不必申報CSS。