第 11 章使用组合框、步进器、拾色器、进度条、分割线

第11章 使用组合框、步进器、拾色器、进度条、分割线 • 除前面讲述的控件外，Flex还为一些特殊界面元素定义相应的组件。包括：组合框、步进器、拾色器、进度条和分割线。本章将对这些组件进行逐一介绍。

11.1 使用组合框 • 使用组合框，用户可以自己输入内容，也可以从组合框中的列表中选择需要的内容。在Flex中，组合框控件（ComboBox Control）实现了上述功能。 • 组合框控件分为2部分，文本输入区域和下拉箭头。用户可以在文本输入区域输入内容，单击下拉箭头可弹出下拉列表，在列表中选择相应的内容。下面是一个组合框控件的示例。图为控件的初始状态，图为单击下拉箭头弹出列表时状态。

11.1.1 组合框控件标签 • 组合框控件对应的MXML标签为<mx:ComboBox>。在组合框控件中，有些功能类似于列表类控件。有些功能，如在列表条目项上显示提示等，可以参照列表控件，这里不再详述。除此之外一些常用的属性如表所示。

11.1.2 组合列表框控件事件 • 在列表框控件中，常用的事件有以下几种。 • change：当选择的内容发生改变时触发该事件。 • open：在弹出下拉列表框时触发该事件 • close：当关闭列表时触发该事件 • scroll：显示下拉列表框时，用户鼠标在列表项上移动时触发的事件 • 其中，open和close事件是mx.events.ListEvent类型的事件。 • 有一点需要说明，控件弹出列表后，单击需要的内容选择时，不会发生itemClick事件，这点与列表控件不同。

11.1.3 创建组合列表框控件 • 创建组合列表框控件，使用<mx:ComboBox>标签，设定相关的属性，并定义事件处理。下面以图11.1为例介绍控件的创建过程。 • 图11.1的例子比较简单，只需定义列表和控件的数据即可，没有对触发的事件进行处理。代码如下。 • <?xml version="1.0"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14"> • <mx:Panel title="组合框控件" height="130"> • <mx:Label text="请选择城市"/> •  • <mx:ComboBox y="33" width="124" x="18"> •  • <mx:ArrayCollection> • <mx:String>上海</mx:String> • <mx:String>北京</mx:String> • <mx:String>广州</mx:String> • <mx:String>深圳</mx:String> • <mx:String>香港</mx:String> • </mx:ArrayCollection> • </mx:ComboBox> • </mx:Panel> • </mx:Application>

11.2 使用数字步进器 • 在用户界面中，数字步进器控件（NumericStepper Control）可以帮助用户快速地输入数字。数字步进器可以根据步进器中的上下箭头调整数据。用户只能步进器规定的数值范围之内进行选择。在Flex中，可以通过数字步进器控件实现上述功能。 • 数字步进器控件分为2个部分，文本输入部分和上下箭头部分。用户在文本输入部分输入数字，利用上下箭头改变数字，图是使用数字一个输入时间的例子。

11.3 使用拾色器 • 拾色器是页面中常见的元素。拾色器用来为背景、文本等其他元素选择各种颜色的外观。在Flex中，与之对应的为拾色器控件（ColorPicker Control）。图为拾色器控件的一个实例。图中拾色器控件处于初始状态，如果需要选择其他颜色，单击右下角的箭头打开色版。

11.3.1 拾色器控件标签 • 拾色器控件的MXML标签为<mx:ColorPicker>。该组件常用属性表所示。

11.3.2 拾色器控件的事件 • 由于拾色器控件与组合框控件有些类似，在打开色版以及选择完颜色后关闭面板都会出发相应的事件。分别对应为Open和Close事件，具体可以参看组合框控件。除Open和Close事件外，该控件还可触发如下的事件。 • change：用户利用色版改变颜色时触发该事件。 • itemRollOut：当鼠标从色版上移出时触发该事件。 • itemRollOver：当鼠标在色版上移过时，触发该事件。 • 上述三个事件为mx.events.ColorPickerEvent事件。

11.3.3 创建拾色器控件 • 创建拾色器控件，只需在应用界面代码中合适的位置插入<mx:ColorPicker>标签。例如。 • <mx:ColorPicker id="myColorPicker "/> • 上面的代码创建了一个id标识为myColorPicker的拾色器。在选择完颜色后，可以在代码中利用myColorPicker. selectedColor获得选择的颜色值。下面是一个利用拾色器控件改变容器背景的例子，

11.4 进度条 • 在用户界面中，常使用进度条来显示任务的进行状况。例如下载文件时利用进度条显示下载的进度。在Flex中，与进度条功能对应的是进度条控件（ProgressBar Control）。 • 根据外观，进度条控件分为2类，如下所示。 • 确定型进度条（Determinated）：随着完成任务所需时间的减少，进度条逐渐添满整个进度区域，不确定型进度条（Indeterminated）：与determinated类型的进度条不同，它不会随时间的推移逐渐添满进度区域，而是在任务完成之前一直显示循环滚动状态，

11.4.1 进度条控件标签 • 进度条控件对应的MXML标签为<mx:ProgressBar>。该控件的常用属性如表所示。

11.4.2 创建进度条控件 • 创建进度条控件时，首先根据需求定义进度条的模式，再插入控件的MXML标签，定义相应的属性，最后定义进度条事件的处理方法。图利用滚动条显示照片下载的进度。

11.5 分割线 • 在构建页面中，有时需要插入分割线显示地分割容器中的各区域，使界面元素更加整齐。在Flex中，与之对应的为垂直线控件(VRule Control)和水平线控件(HRule Control)，如图所示。

11.5.1 垂直线控件和水平线控件 • 垂直线控件的MXML标签是<mx:VRule>。水平线控件的MXML标签为<mx:HRule>。垂直线控件与水平线控件只在外观上略有差异，控件的属性和创建方法均一致，所以这里以垂直线控件为例介绍它的常用属性及创建过程。 • 在创建分割线控件的一般只使用strokeWidth属性定义分割线的宽度。还可以根据strokeColor和shadowColor定义分割线的外观。

11.5.2 创建垂直线控件和水平线控件 • 创建垂直线控件和水平线控件，与其他控件相比更为简单，也可将其看做静态的界面元素，只需在需要的地方插入即可。下面的例子中在文本之间插入水平控件，如图。

11.5.3 定制垂直线控件和水平线控件外观 • 使用垂直线控件和水平线控件，有时需要配合界面中的其他元素，改变垂直线控件和水平线控件的颜色和宽度等。下面的例子分别显示了不同垂直线控件和水平线控件外观。

第 11 章 使用组合框、步进器、拾色器、进度条、分割线