如何检查 Flex 3 中单选按钮的状态？

Question

我正在开发 Flex 中的动态问卷模板。更详细的描述在我之前的帖子HERE

为了创建问卷，我使用嵌套的重复器 - 一个用于问题，一个用于答案（因为它们的数量可能会有所不同）。

<mx:Repeater id="r" dataProvider="{questions}">
   <mx:Label text="{r.currentItem.question}" width="200"/>
      <mx:Repeater id="r2" dataProvider="{r.currentItem.answers}">
         <mx:RadioButton label="{r2.currentItem.text}" width="200"                                          
          click="answerHandler(event, event.currentTarget.getRepeaterItem())"/>
      </mx:Repeater>
</mx:Repeater>

要了解我的数据提供者，最好查看我之前的帖子的答案 - 比我在这里解释要容易。

这里的问题是...如您所见，我为每个单选按钮创建了单击事件处理程序，我的计划是每次用户正确选择时执行 playerScore++（这可以通过检查布尔属性“正确”来实现发送的RepeaterItem）。

但是，我现在看到即使该按钮已被选中，我仍然可以多次单击它，即使它没有改变视图中的任何内容，它每次都会增加分数。我还必须处理用户改变主意的情况（我可以给每个好的答案 + 分和 - 错误的分数，但这意味着，如果用户选择了更多错误的答案，我的分数将是负面的，我不想要它）。

因此，只有一个提交按钮并检查我所有按钮的状态以及仅在用户单击“提交”后它们是否正确才会更容易。有可能吗？

Answer 1

我建议您参考following sample 并将RadioButtonGroup 添加到您的转发器组并收听change 事件而不是click。您可以在RadioButtonGroup 中收听change 事件并检查if (radioGroup.selectedValue.correct) 以了解新选择的正确性。见corresponding documentation。

为了有可能为无线电组分配唯一名称，您必须将带有答案的内部中继器提取到单独的组件中。将您的应用程序分解成更小的组件可以使您的应用程序更加清晰易读。您可以将每个 MXML 文件视为一个类（如在 OOP 中），但采用声明形式。并且说实话每个 MXML 组件都是一个继承自 root-node-class 的类。

让我们看看代码。

首先，我们提供答案的内部组件：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Metadata>
        [Event(name="rightAnswerEvent", type="AnswerEvent")]
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var answers:ArrayCollection;

        protected function answerGroup_changeHandler(event:Event):void
        {
            if (answerGroup.selectedValue.correct)
                dispatchEvent(new AnswerEvent(AnswerEvent.RIGHT_ANSWER_EVENT));
        }
    ]]>
    </mx:Script>

    <mx:RadioButtonGroup change="answerGroup_changeHandler(event)" id="answerGroup" />
    <mx:Repeater dataProvider="{answers}" id="answersRepeater">
        <mx:RadioButton group="{answerGroup}" label="{answersRepeater.currentItem.text}"
            value="{answersRepeater.currentItem}" />
    </mx:Repeater>
</mx:VBox>

它获取answers 集合作为输入并触发我们的自定义事件以通知某些组件正确答案（请参阅Metadata 标记）。

我们的自定义事件非常简单，如下所示：

package
{
import flash.events.Event;

public class AnswerEvent extends Event
{
    public static const RIGHT_ANSWER_EVENT:String = "rightAnswerEvent";

    public function AnswerEvent(type:String)
    {
        super(type);
    }
}
}

现在我们的顶级组件：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" xmlns:local="*"
    xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        private var questions:ArrayCollection = new ArrayCollection();

        [Bindable]
        private var scoreCounter:int;
    ]]>
    </mx:Script>
    <mx:Label text="{'Score ' + scoreCounter}" />
    <mx:Repeater dataProvider="{questions}" id="questionRepeater">
        <mx:Label text="{questionRepeater.currentItem.question}" />
        <local:AnswerGroup answers="{questionRepeater.currentItem.answers}" rightAnswerEvent="scoreCounter++" />
    </mx:Repeater>
</mx:Application>

我省略了初始化代码以使用来自 XML 的数据填充我们的 Question 和 Answer 域对象（请参阅上一个线程）。

所以现在我们有了紧凑的模块化代码，每个部分都解决了自己的任务。

希望这会有所帮助！