Jul 06

Flex中如何利用cornerRadius样式控制Panel容器边角圆滑程度的例子

FlexAdd comments

在前面的Flex中如何通过focusRoundedCorners样式在TextInput控件获得焦点后控制矩形对角圆滑与否的例子中我们了解了TextInput控件边角圆滑的控制，接下来的例子则演示了Flex中如何利用cornerRadius样式,控制Panel容器边角圆滑程度.

让我们先来看一下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" layout="vertical" backgroundColor="white">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             private function dataTipFormatFunc(item:Number):String {
  7.                 return "cornerRadius = " + item;
  8.             }
  9.         ]]>
  10.     </mx:Script>
  11.  
  12.     <mx:HBox id="hBox">
  13.         <mx:Panel title="Panel w/o ControlBar" cornerRadius="{slider.value}" width="160" height="100">
  14.             <mx:Text text="Lorem ipsum..." />
  15.         </mx:Panel>
  16.  
  17.         <mx:Panel title="Panel w/ ControlBar" cornerRadius="{slider.value}" width="160" height="100">
  18.             <mx:Text text="Lorem ipsum..." />
  19.             <mx:ControlBar>
  20.                 <mx:Label text="I'm a ControlBar" />
  21.             </mx:ControlBar>
  22.         </mx:Panel>
  23.     </mx:HBox>
  24.  
  25.     <mx:Spacer height="10" />
  26.  
  27.     <mx:HSlider id="slider" width="{hBox.width}" minimum="0" maximum="25" liveDragging="true" snapInterval="1" tickInterval="1" dataTipFormatFunction="dataTipFormatFunc" />
  28.  
  29. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , ,

Related Post

One Response to “Flex中如何利用cornerRadius样式控制Panel容器边角圆滑程度的例子”

Trackbacks

Leave a Reply