Jun 18

Flex中如何通过focusRoundedCorners样式在TextInput控件获得焦点后控制矩形对角圆滑与否的例子

FlexAdd comments

在前面的例子Flex中如何改变TextInput输入框得到焦点时边框颜色的例子中，我们演示过如何改变TextInput输入框得到焦点时边框的颜色。其实不仅仅是颜色，有时候我们对着一成不变的矩形也会厌烦。接下来的例子就演示了Flex中如何通过focusRoundedCorners样式，在TextInput控件获得焦点后控制矩形对角圆滑与否，使简单的TextInput也更具个性化一些。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private function checkBox_change(evt:Event):void {
  10.                 var corners:Array = [];
  11.                 if (tLeft.selected) {
  12.                     corners.push("tl");
  13.                 }
  14.                 if (tRight.selected) {
  15.                     corners.push("tr");
  16.                 }
  17.                 if (bLeft.selected) {
  18.                     corners.push("bl");
  19.                 }
  20.                 if (bRight.selected) {
  21.                     corners.push("br");
  22.                 }
  23.                 var str:String = corners.join(" ");
  24.                 textInput.setStyle("focusRoundedCorners", str);
  25.                 focusManager.setFocus(textInput);
  26.             }
  27.         ]]>
  28.     </mx:Script>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Form styleName="plain">
  32.             <mx:FormItem label="top left (tl):">
  33.                 <mx:CheckBox id="tLeft"
  34.                         selected="true"
  35.                         change="checkBox_change(event);" />
  36.             </mx:FormItem>
  37.             <mx:FormItem label="top right (tr):">
  38.                 <mx:CheckBox id="tRight"
  39.                         selected="true"
  40.                         change="checkBox_change(event);" />
  41.             </mx:FormItem>
  42.             <mx:FormItem label="bottom left (bl):">
  43.                 <mx:CheckBox id="bLeft"
  44.                         selected="true"
  45.                         change="checkBox_change(event);" />
  46.             </mx:FormItem>
  47.             <mx:FormItem label="top right (br):">
  48.                 <mx:CheckBox id="bRight"
  49.                         selected="true"
  50.                         change="checkBox_change(event);" />
  51.             </mx:FormItem>
  52.         </mx:Form>
  53.     </mx:ApplicationControlBar>
  54.  
  55.     <mx:TextInput id="textInput"
  56.             focusThickness="10"
  57.             cornerRadius="10" />
  58.  
  59. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , ,

Related Post

2 Responses to “Flex中如何通过focusRoundedCorners样式在TextInput控件获得焦点后控制矩形对角圆滑与否的例子”

Trackbacks

Leave a Reply