Apache flex 如何在Flex 4 TextInput组件上设置拐角半径

如何在Flex4中获取TextInput组件的角半径

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

创建自定义外观（可能通过复制spark TextInputSkin）并添加圆角边框图形，如下所示：

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

---

默认的TextInputSkin不允许圆角，因此没有可以在TextInput上设置的样式。因此，没有别的办法，只能创建一个自定义皮肤类。

您可以更进一步，使其动态化。基于spark TextInputSkin创建自定义TextInputSkin，并在updateDisplayList方法中，在super.updateDisplayList（）调用上方添加此代码

在您的TextInputSkin.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标记那样支持这种类型的样式标记？皮肤中声明的样式是否应该代理给使用它们的组件？当前，如果您在皮肤中声明了一个样式并试图在组件实例上使用它，那么Flex编译器将抛出一个错误，即使在CSS中声明该样式和任何其他样式都是有效的。如果UIComponents有一个允许您设置样式的样式代理对象呢？无论如何，我离题了

如果要使该样式在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>

[样式（name=“cornerRadius”，inherit=“no”，type=“uint”）]

使用

<local:MyExtendedTextInput cornderRadius="8" />

将来，您将不必声明CSS

<local:MyExtendedTextInput cornderRadius="8" />