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

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">
7.     <mx:Script>
8.         <![CDATA[
9.             private function init():void {
10.                 slider.value = txt.getStyle("leading");
11.             }
12.         ]]>
13.     </mx:Script>
15.     <mx:String id="lorem" source="lorem.txt" />
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>
34.     <mx:Text id="txt"
35.             text="{lorem}"
36.             leading="{slider.value}"
37.             textAlign="justify"
38.             width="400"
39.             preinitialize="init();" />
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">
7.     <mx:Style>
8.         Text {
9.             leading: 12;
10.         }
11.     </mx:Style>
13.     <mx:Script>
14.         <![CDATA[
15.             private function init():void {
16.                 lbl.text = txt.getStyle("leading");
17.             }
18.         ]]>
19.     </mx:Script>
21.     <mx:String id="lorem" source="lorem.txt" />
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>
34.     <mx:Text id="txt"
35.             text="{lorem}"
36.             textAlign="justify"
37.             width="400" />
39. </mx:Application>