radioButton学习指南

控件概述

1.1 rdadioButton的理解

单选框按钮控件是对一组选项进行单一选择的图形控件，单选框式成组使用的，每一组选项都具有相同的组名，每次只能选择一个选项，选择未选中的组成员将取消该组中当前所选的RadioButton，RadioButton包含具有相同groupName属性的两个或多个RadioButton组件。

相类似的控件

checkBox控件用来得到用户选择的布尔值。该控件可被标识为被选择的和

未被选择两种状态，其返回值是true或false布尔值。

两者的区别：单选框式成组使用的，没一组选项都具有相同的组名，每次只能选择一个选项，而checkBox可以选择多项。

 

继承关系

RadioButton—>ToggleButtonBase—>ButtonBase—>SkinnableComponent —>UIComponent

参考文献：Adobe® Flex® 4.1 语言参考

控件常用属性和方法

名称	分类	说明
Groupname（请对比着group学习）	属性	指定此radioButton组件所属的组的名称，或者如果此RadioButton是radioButtonGroup组件定义的组的一部分则指定radioButtonGroup组件的id属性值（详见3.1）
Enabled	属性	如果radioButtonGroup启用则RadioButton组件启用且RadioButton本身也启用（详见例3.2）
Group	属性	此radioButton所属的radioButtonGroup组件（详见例3.3）
Value	属性	与radioButton组件关联的可选用户定义值 可用于绑定数据(详见例3.6)
Click	事件	用户在按下并释放用户指针设备的主按钮时分派（详见例3.1）
Change	事件	用户要求改变时分派（详见例3.5）

使用方法

Groupname属性的举例

功能：指定此radioButton组件所属组的名臣，或者如果此radioButton是radioButtonGroup组件定义的组的一部分，则指定radioButtongroup组件的ID属性值。具有相同groupName属性的所有单选按钮都将位于同一个选项卡组

代码如下：

  groupName="amount" id="opion1" x="84" y="61"  label="100" click="btn.label='100'"/>

  groupName="amount" id="opion2" x="84" y="91"  label="200"  click="btn.label='200'"/>

 

演示效果如下:bin-debug\radiobutton.html

详细代码见：radioButton.mxml

属性的举例

功能： 如果radioButtonGroup启用则RadioButton组件启用。

关键代码：

  enabled="false" groupName="amount" id="opion1" x="84" y="61"  label="100" click="btn.label='100'"/>

           enabled="true" groupName="amount" id="opion2" x="84" y="91"  label="200"  click="btn.label='200'"/>

演示效果如下：

  1当enabled=“false”时  

 

 2 当enabled=“true”时

注释：enabled=“false”时单选框也不能选择。

动态演示效果：bin-debug\enabled.html

详细代码见：enabled.mxml

属性的举例

功能：创建要放入radioButtonGroup中的radioButton时，应该对所有按钮使用的group属性或者groupname属性进行分组

谨记：必须将RadioButtonGroup声明在

Declarations>

          id="radio"/>

       

    Declarations>

关键代码：

<fx:Declarations>

        id="radio"/>

       

     

 

        x="375" y="54" width="250" height="262" title="单选按钮示例">

        group="{radio}" id="opion1" x="84" y="61"  label="100" click="btn.label='100'"/>

          group="{radio}" id="opion2" x="84" y="91"  label="200"  click="btn.label='200'"/>

          group="{radio}" id="opion3" x="84" y="117" label="300"  click="btn.label='300'"/>

        group="{radio}" id="opion4" x="84" y="143" label="400" click="btn.label='400'"/>

演示效果：bin-debug\group1.html

详细代码：group.mxml

属性与groupname属性的区别

  第一：赋值方法上

group="{radio}"

             groupName="amount"

第二：成组方法上

group要成组必须和radiobuttongroup控件一起使用而groupname属性则可要可不要。 具体方法请见3.2和3.3的分析

事件的举例

功能：通过change事件，检测RadioButton或RadioButtonGroup选中项目是否改变。

主要代码：

         

                private function rb_change(evt:Event):void

{

                   var rb:RadioButton = evt.currentTarget as RadioButton;

                   lbl.text = rb.label;

                }

          ]]>

     

   

       

        RadioButton id="rb1"

                        label="One"

                        change="rb_change(event);" />

        RadioButton id="rb2"

                        label="Two"

                        change="rb_change(event);" />

        RadioButton id="rb3"

                        label="Three"

                        change="rb_change(event);" />

   

演示效果:

详细代码：change.mxml

参考文献：flex中文例子

http://blog.minidx.com/2008/10/25/1578.html

属性的例子

首先要了解value属性必须先了解radiobuttongroup的selectedvalue属性，selectedvalue表示组中所选radiobutton组件的value属性，如果没有value属性，则为所选radiobutton组件的label属性。如果为选则热河radiobutton，则此属性为null

功能：

1.value属性作为数据源的用法

2．设置RadioButtonGroup类的selection属性，用ActionScript清除当前选中RadioButton。

关键代码：

   （1）定义一个radiobuttongroup控件

        id="answers" />

       

   

（2）写出他的重置，与选中函数

         

            import mx.controls.Alert;

             private function reset():void

{

                answers.selection = null;

             }

           

            private function check():void

{

                if (answers.selectedValue)

{

                    Alert.show(answers.selectedValue.toString());

                   } else {

                    Alert.show("unselected");

                            }

                 }

            ]]>

     

（3）定义radiobutton

backgroundColor="red">

           

            id="question"

                     text="Question..." />

          

          

               id="answer1"  value="a"

                            group="{answers}"

                            label="Answer 1" />

          

         

               id="answer2" value="b"

                            group="{answers}"

                            label="Answer 2" />

          

   

效果演示：

（1）注意他其实保存的是它的value的值

bin-debug\lizi.html

详细代码：lizi.mxml

 

声明：如果有人需要详细代码请留言联系本人！！