Flex DropDownList控件功能

控件概述

DropDownList 控件包含下拉列表，用户可从中选择单个值。其功能与 HTML 中 SELECT 表单元素的功能非常相似。

DropDownList 控件由锚点按钮、提示区域和下拉列表组成，使用锚点按钮可打开和关闭下拉列表。提示区域显示一个提示 String，或者显示下拉列表中的选定项目。

打开下拉列表时：

• 单击锚点按钮会关闭下拉列表并提交当前选定的数据项目。
• 在下拉列表之外单击会关闭下拉列表并提交当前选定的数据项目。
• 在某个数据项目上单击会选中该项目并关闭下拉列表。

 

[1]参考文献：Adobe官方参考文档：

控件常用属性和方法

 

名称	分类	说明
requireSelection：Boolean	属性	如果为 true，则必须始终在控件中选中数据项目并且始终将selectedIndex 属性设置0和(dataProvider.length - 1) 之间的一个值。默认值为 false。（实例详见3.3）
selectedIndex：int	属性	选中项目的基于 0 的索引；或者如果未选中项目，则为基于 -1 的索引。该值始终在 -1 和 (dataProvider.length - 1) 之间(实例详见3.3)
Prompt：string	属性	在未选择任何一项时提示区域显示的文本, 提示是当 selectedIndex = -1 时在 DropDownList 中显示的 String（实例详见3.2）
dataProvider	属性	此 DataGroup 的数据提供程序。它必须为 IList。 在 Flex 框架中包含多个 IList 实现，包括 ArrayCollection、ArrayList 和 XMLListCollection。 此属性可用作数据绑定的源。（实例详见3.2）
itemRenderer（待查）[2]	属性	用于数据项目的项呈示器。该类必须实现 IDataRenderer 接口。如果已定义，则 itemRendererFunction 属性优先于此属性。
:	属性	指示指定对象的 Alpha 透明度值。有效值为 0（完全透明）到 1（完全不透明）。默认值为 1。alpha 设置为 0 的显示对象是活动的，即使它们不可见。（实例详见3.4）
:	属性	数据提供的项目中作为标签显示的字段名称（实例详见3.2）
Change	事件	所选内容已更改后分派（实例详见3.2）
（待查）	事件	此事件被调度到任何支持使用 IME 进行内联输入的客户端应用程序

 

[2]可参考 Flex Gumbo中如何通过itemRenderer属性，在DropDownList中显示图片http://blog.minidx.com/2009/08/13/2832.html

 

控件的基本用法

定义DropDownList的数据源

1.DataProvider为DropDownList提供下拉菜单的数据，其可以是ArrayCollection类型的。

在As3.0代码中定义一个数据源，代码如下：

public var myDP:ArrayCollection = new ArrayCollection(

                [ {product:"Flex", price:100},

                {product:"Air", price:200},

                {product:"Catalyst", price:300},

                {product:"FlashBuilder", price:400} ]);

 

在Lable标签中显示在下拉列表中选中的数据

1.在MXML代码中定义一个DropDownListc控件并且同时定义Lable标签用于显示被选择的数据。

代码如下：

 

           

            id="currSel" text="产品名 = " x="86" y="119"/>

            id="currPrc" text="价格 = $ " x="85" y="219"/>

           

           

            id="myDDL"

                            width="200" dataProvider="{myDP}"

                    labelField="product"

                            change="updateSelection(event);" x="241" y="72" prompt="请选择"/>  

2.定义了一个change事件如果在下拉菜单中选择了任何一项，则会启动updateSelection函数其会在Lable中显示选择的内容

updateSelection函数的定义如下：

private function updateSelection(e:IndexChangeEvent):void

            {

                currSel.text = "产品名 = " + myDDL.selectedItem.product;

                currPrc.text = "价格 = $" + myDDL.selectedItem.price;

            }

 

 

selectedIndex的理解

1. requireSelection的默认值为false，我们将其设置为true来看看效果，如3.1一样我们将myDP设定为数据源

代码如下：

x="160" y="90" width="202" height="26" requireSelection="true" dataProvider="{myDP}"labelField="product" prompt="请选择：" id="dl” change="dropdownlist1_changeHandler(event)">

还定义一个Lable标签用来显示selectIndex值的变化

 

代码如下：

标签" width="147" height="22" id="lb"/>

 

定义一个change事件当所选内容已更改后分派实现输出selectIndex的值

 

代码如下：

 

protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void

            {

               

                lb.text="selectIndex的值是"+dl.selectedIndex;

            }

（我们可以看到由于设置requireSelection的值为true，那么selectedIndex的值就只0和(dataProvider.length - 1) 之间的取值，而prompt属性的内容是在selectedIndex值为-1时显示，故当requireSelection的值为true时，prompt的内容永远不会显示。）

 

3.4      属性的实例

      指示指定对象的 Alpha 透明度值。有效值为 0（完全透明）到 1（完全不透明）。默认值为 1，我们设置其值为0.5来看看效果。

代码如下：

       x="101" y="121" width="153" height="28" alpha="0.5">