给LIST控件添加投影效果.

Flex LIST控件阴影效果

最新推荐文章于 2021-02-27 16:13:42 发布

weixin_34221775

最新推荐文章于 2021-02-27 16:13:42 发布

阅读量84

点赞数

本文介绍了如何使用Flex中的LIST控件实现阴影效果，并提供了三种方法：直接在MXML中设置dropShadowEnabled属性、通过CSS样式设置以及使用ActionScript代码动态控制。

LIST控件的dropShadowEnabled样式.

示例:

代码：

<? xml version="1.0" encoding="utf-8" ?>

< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Array id ="arr" >
         < mx:Object label ="One" />
         < mx:Object label ="Two" />
         < mx:Object label ="Three" />
         < mx:Object label ="Four" />
         < mx:Object label ="Five" />
         < mx:Object label ="Six" />
         < mx:Object label ="Seven" />
         < mx:Object label ="Eight" />
         < mx:Object label ="Nine" />
         < mx:Object label ="Ten" />
     </ mx:Array >

     < mx:ApplicationControlBar dock ="true" >
         < mx:Form styleName ="plain" >
             < mx:FormItem label ="dropShadowEnabled:" >
                 < mx:CheckBox id ="checkBox" />
             </ mx:FormItem >
         </ mx:Form >
     </ mx:ApplicationControlBar >

     < mx:List id ="list"
            dataProvider =" {arr} "
            dropShadowEnabled =" {checkBox.selected} "
            width ="100" />

</ mx:Application >

也可以通过CSS来设置：

也可以通过AS的函数实现：

<? 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 {
                list.setStyle("dropShadowEnabled", checkBox.selected);
            }
         ]]>
     </ mx:Script >

     < mx:Array id ="arr" >
         < mx:Object label ="One" />
         < mx:Object label ="Two" />
         < mx:Object label ="Three" />
         < mx:Object label ="Four" />
         < mx:Object label ="Five" />
         < mx:Object label ="Six" />
         < mx:Object label ="Seven" />
         < mx:Object label ="Eight" />
         < mx:Object label ="Nine" />
         < mx:Object label ="Ten" />
     </ mx:Array >

     < mx:ApplicationControlBar dock ="true" >
         < mx:Form styleName ="plain" >
             < mx:FormItem label ="dropShadowEnabled:" >
                 < mx:CheckBox id ="checkBox"
                        change ="checkBox_change(event);" />
             </ mx:FormItem >
         </ mx:Form >
     </ mx:ApplicationControlBar >

     < mx:List id ="list"
            dataProvider =" {arr} "
            width ="100" />

</ mx:Application >

源文件： http://blog.flexexamples.com/wp-content/uploads/List_dropShadowEnabled_test/bin/srcview/index.html

来自：http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/