Adobe flex从列表组件到单选按钮

时间:2012-12-12 17:45:45

标签: flex list if-statement adobe radio-button

我曾尝试过很多方法,但对于我的生活却无法思考如何。基本上我有一个清单。选择列表中的项目后,单选按钮标签会发生变化。但是,如果用户点击了单选按钮,我想要一个标签和文本区域。 代码到目前为止: -          

<s:VGroup x="103" y="130" width="123" height="125">
    <s:RadioButton id="RadioButton1" label="{data.QuestionsRadioButton1}" groupName="QuestionsTestRadioButtons" click="RadioButton1_clickHandler(event)"/>
    <s:RadioButton label="{data.QuestionsRadioButton2}" groupName="QuestionsTestRadioButtons" click="radiobutton1_clickHandler(event)" />
    <s:RadioButton id="RadioButton3" label="{data.QuestionsRadioButton3}" groupName="QuestionsTestRadioButtons" click="radiobutton2_clickHandler(event)"/>
</s:VGroup>

我不会发布所有代码,因为我们将永远在这里。但是,有没有办法可能是if功能?如果实际上点击的单选按钮是否是正确的答案?

任何建议都会有所帮助 谢谢

1 个答案:

答案 0 :(得分:0)

我试图起草一个完整的例子:

<强> Questionaire.mxml

<?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:local="*">
    <fx:Declarations>
        <s:ArrayCollection id="questions">
            <local:Question text="It is raining …">
                <s:ArrayCollection>
                    <local:Answer text="Men"/>
                    <local:Answer text="Cats and dogs" correct="true"/>
                    <local:Answer text="Candy"/>
                </s:ArrayCollection>
            </local:Question>
            <local:Question text="The sky is …">
                <s:ArrayCollection>
                    <local:Answer text="Blue" correct="true"/>
                    <local:Answer text="Orange" correct="true"/>
                    <local:Answer text="Grey" correct="true"/>
                    <local:Answer text="Green"/>
                </s:ArrayCollection>
            </local:Question>
        </s:ArrayCollection>
    </fx:Declarations>

    <s:DataGroup dataProvider="{questions}" itemRenderer="QuestionRenderer">
        <s:layout>
            <s:VerticalLayout gap="24"/>
        </s:layout>
    </s:DataGroup>
</s:Application>

<强> QuestionRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:DataRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
        <![CDATA[
            [Bindable("dataChange")]
            public function get question():Question {
                return data as Question;
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:RadioButtonGroup id="answerGroup"/>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Label fontWeight="bold" text="{question.text}"/>

    <s:DataGroup dataProvider="{question.answers}">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:DataRenderer>
                    <fx:Script>
                        <![CDATA[
                            import spark.components.RadioButtonGroup;

                            public function get answerGroup():RadioButtonGroup {
                                return outerDocument.answerGroup;
                            }
                        ]]>
                    </fx:Script>
                    <s:RadioButton groupName="answerGroup" label="{data.text}" value="{data}"/>
                </s:DataRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>

    <s:Label visible="{answerGroup.selectedValue}" text="This is {answerGroup.selectedValue.correct ? 'correct' : 'incorrect'}."/>
</s:DataRenderer>

<强> Question.as

package {
    import mx.collections.ArrayCollection;

    [Bindable]
    [DefaultProperty("answers")]
    public class Question {
        public var text:String;
        public var answers:ArrayCollection;
    }
}

<强> Answer.as

package {
    [Bindable]
    public class Answer {
        public var text:String;
        public var correct:Boolean = false;
    }
}