如何在 Flex 4 TextInput 组件上设置圆角半径

Question

如何获取 Flex 4 中 TextInput 组件的角半径。

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

Answer 1

创建自定义皮肤（可能通过复制 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>

如果您想要更特殊的圆角，您还可以使用这些属性：

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 编译器也会抛出错误。如果 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>

要使用，

<local:MyExtendedTextInput cornderRadius="8" />

将来您将不必声明 CSS。