Flex设定Textinput圆角矩形输入框

（英文）原文地址


1、以下的例子展示如何通过设置focusRoundedCorners来指定被聚焦的TextInput输入控件的矩形输入框的圆角设定。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="middle"
				backgroundColor="white">

	<mx:Script>
		<![CDATA[
			private function checkBox_change(evt:Event):void {
				var corners:Array = [];
				if (tLeft.selected) {
					corners.push("tl");
				}
				if (tRight.selected) {
					corners.push("tr");
				}
				if (bLeft.selected) {
					corners.push("bl");
				}
				if (bRight.selected) {
					corners.push("br");
				}
				var str:String = corners.join(" ");
				textInput.setStyle("focusRoundedCorners", str);
				focusManager.setFocus(textInput);
			}
		]]>
	</mx:Script>

	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="top left (tl):">
				<mx:CheckBox id="tLeft"
							 selected="true"
							 change="checkBox_change(event);" />
			</mx:FormItem>
			<mx:FormItem label="top right (tr):">
				<mx:CheckBox id="tRight"
							 selected="true"
							 change="checkBox_change(event);" />
			</mx:FormItem>
			<mx:FormItem label="bottom left (bl):">
				<mx:CheckBox id="bLeft"
							 selected="true"
							 change="checkBox_change(event);" />
			</mx:FormItem>
			<mx:FormItem label="top right (br):">
				<mx:CheckBox id="bRight"
							 selected="true"
							 change="checkBox_change(event);" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:TextInput id="textInput"
				  focusThickness="10"
				  cornerRadius="10" />
	<mx:Button/>

</mx:Application>

2、同时也还可以在Mxml设定

方式1：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10"
            focusRoundedCorners="tl br" />

</mx:Application>

方式2：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TextInput {
            focusRoundedCorners: "tl br";
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10" />

</mx:Application>