Flex设定Textinput圆角矩形输入框（转）

最新推荐文章于 2023-12-09 12:49:05 发布

原创最新推荐文章于 2023-12-09 12:49:05 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #XML #Blog

Felx开发技术总结专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用Flex为TextInput控件设置特定圆角的聚焦样式。提供了三种方法：通过CheckBox动态更改、直接在MXML中设定及使用样式定义。

[url=http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/]（英文）原文地址[/url]

[color=green][b][size=large]1、以下的例子展示如何通过设置focusRoundedCorners来指定被聚焦的TextInput输入控件的矩形输入框的圆角设定。[/size][/b][/color]

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

[img]http://dl.iteye.com/upload/attachment/245859/94590c28-0931-3e9d-9c23-9f94303ad71f.jpg[/img]

[color=green][b][size=large]2、同时也还可以在Mxml设定[/size][/b][/color]

[color=brown]方式1：[/color]


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

[color=brown]方式2：[/color]


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