Flex4.5CheckBox复选框组件运用

    这次讲的是复选框的用法，并且用全选和反选的例子来给大家演示。

    照例先把代码发下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      minWidth="955" minHeight="600">
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   [Bindable]
   private var choose:Boolean = false;
   private function click(iss:Boolean):void
   {
    choose = iss;
   }
  ]]>
 </fx:Script>
 <s:CheckBox x="458" y="69" width="109" height="55" label="面码（呜呜）" fontFamily="中易黑体" fontSize="15"
    selected="{choose}" skinClass="checkbox"/>
 <s:CheckBox x="287" y="69" width="109" height="55" label="呆唯（我嘛）" fontFamily="中易黑体" fontSize="15"
    selected="{choose}" skinClass="checkbox"/>
 <s:CheckBox x="115" y="69" width="109" height="55" label="天使（选我）" fontFamily="中易黑体" fontSize="15"
    selected="{choose}" skinClass="checkbox"/>
 <s:CheckBox x="644" y="65" width="109" height="55" label="由乃（爱你）" fontFamily="中易黑体" fontSize="15"
    selected="{choose}" skinClass="checkbox"/>
 <s:CheckBox x="115" y="180" label="古河（团子）" fontFamily="中易黑体" fontSize="15" selected="{choose}"
    skinClass="checkbox"/>
 <s:CheckBox x="287" y="180" label="大河（啰嗦）" fontFamily="中易黑体" fontSize="15" selected="{choose}"
    skinClass="checkbox"/>
 <s:CheckBox x="458" y="180" label="梨花（咪啪）" fontFamily="中易黑体" fontSize="15" selected="{choose}"
    skinClass="checkbox"/>
 <s:CheckBox x="644" y="180" label="礼奈（骗人）" fontFamily="中易黑体" fontSize="15" selected="{choose}"
    skinClass="checkbox"/>
 <s:Button x="251" y="259" label="都是我的" click="click(true)"/>
 <s:Button x="366" y="259" label="哥腻味了" click="click(false)"/>
 <s:Label x="310" y="31" width="95" height="26" fontFamily="中易宋体" fontSize="22" text="宅男选妃"/>
 <s:Image x="59" y="69" width="53" height="51" source="assets/立华奏.jpg"/>
 <s:Image x="587" y="72" width="53" height="51" source="assets/由乃1.jpg"/>
 <s:Image x="232" y="69" width="53" height="51" source="assets/平泽唯.jpg"/>
 <s:Image x="397" y="65" width="53" height="51" source="assets/面码.jpg"/>
 <s:Image x="54" y="164" width="53" height="51" source="assets/古河.jpg"/>
 <s:Image x="231" y="164" width="53" height="51" source="assets/大河.jpg"/>
 <s:Image x="403" y="164" width="53" height="51" source="assets/梨花.jpg"/>
 <s:Image x="587" y="164" width="53" height="51" source="assets/礼奈.jpg"/>
</s:Application>

嗯，代码不是很多，毕竟是初级的应用，更深一步还得和大家多多交流讨论！下面看看运行结果：

 

 呵呵，是不是实现了全选和反选呢，大家可以自己去试试。动漫迷的话应该会喜欢这个题材，这个看个人爱好了，我的想法就是，既学到东西了，自己又开心了，何乐不为呢！！另外，小小的鄙视一下宅男~跑题了。。。

我们看  [Bindable]  <s:Image/> 这2个有点超出范围，大家可以不用太去钻。

[Bindable] 是数据绑定，以后会给大家专门讲一下。

image 是图片组件，不是很难，有兴趣的同学可以自己去设计界面去拖，然后建立一个image包，图片直接复制进去就完事了，当初我纠结这个问题很久啊，没想到知识复制，粘贴就完事了- -！

我们可以看出来这个程序分3个大部分。方法部分 复选框部分 image部分

方法就是要实现全选反选的

复选框就是要选择的选项了

image，当然就是头像了~

相信根据代码，大家可以摸索出 checkbox的用法了吧。大家现在可以只熟悉组件，太多的逻辑东西，要等到组件信手拈来的时候再去想。还是那句话，看着这个代码去优化去举一反三去吧~！