Flex中如何通过leading样式在一个text控件中设置文本铅框(text leading)的例子

By Minidxer | June 5, 2008

text控件其实也是Flex中非常常用的一个控件，前面的例子中有用到过，不过并没有专门做过说明。接下来的例子演示了在Flex中，如何通过设置leading样式，在一个text控件中设置文本铅框(text leading，也就是竖直方向的行距)。

让我们先来看一下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="top"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private function init():void {
  10.                 slider.value = txt.getStyle("leading");
  11.             }
  12.         ]]>
  13.     </mx:Script>
  14.  
  15.     <mx:String id="lorem" source="lorem.txt" />
  16.  
  17.     <mx:ApplicationControlBar dock="true">
  18.         <mx:Form styleName="plain">
  19.             <mx:FormItem label="leading:" direction="horizontal">
  20.                 <mx:HSlider id="slider"
  21.                         minimum="0"
  22.                         maximum="10"
  23.                         snapInterval="1"
  24.                         tickInterval="1"
  25.                         liveDragging="true" />
  26.                 <mx:Label text="{slider.value}" />
  27.             </mx:FormItem>
  28.             <mx:FormItem label="height:">
  29.                 <mx:Label text="{txt.height}" />
  30.             </mx:FormItem>
  31.         </mx:Form>
  32.     </mx:ApplicationControlBar>
  33.  
  34.     <mx:Text id="txt"
  35.             text="{lorem}"
  36.             leading="{slider.value}"
  37.             textAlign="justify"
  38.             width="400"
  39.             preinitialize="init();" />
  40.  
  41. </mx:Application>

同样的你也可以将leading样式用一个扩展.CSS文件或者是<mx:Style />块来定义，代码：

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="top"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         Text {
  9.             leading: 12;
  10.         }
  11.     </mx:Style>
  12.  
  13.     <mx:Script>
  14.         <![CDATA[
  15.             private function init():void {
  16.                 lbl.text = txt.getStyle("leading");
  17.             }
  18.         ]]>
  19.     </mx:Script>
  20.  
  21.     <mx:String id="lorem" source="lorem.txt" />
  22.  
  23.     <mx:ApplicationControlBar dock="true">
  24.         <mx:Form styleName="plain">
  25.             <mx:FormItem label="leading:">
  26.                 <mx:Label id="lbl" creationComplete="init();" />
  27.             </mx:FormItem>
  28.             <mx:FormItem label="height:">
  29.                 <mx:Label text="{txt.height}" />
  30.             </mx:FormItem>
  31.         </mx:Form>
  32.     </mx:ApplicationControlBar>
  33.  
  34.     <mx:Text id="txt"
  35.             text="{lorem}"
  36.             textAlign="justify"
  37.             width="400" />
  38.  
  39. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | No Comments » | 82 views Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll