Question

我正在创建一个程序，它将包含一个包含标签和单选按钮的自定义mxml组件的多个实例。我想镜像RadioButtonGroup的功能，以便一次只选择一个单选按钮。但不幸的是，我不能让它工作，而且同时选择了一个单选按钮。

我的自定义组件是否需要实现和覆盖IFocusGroupManager类提供的功能？

我在下面提供了我的代码。

Main.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:mx="library://ns.adobe.com/flex/halo"
        xmlns:C="*">

    <fx:Script>
        <![CDATA[
            import flash.events.Event;
            import flash.events.FocusEvent;
            import flash.events.KeyboardEvent;
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
            import spark.components.Group;

            private function FocusIn(evt:FocusEvent):void
            {
                ToggleFocus(evt, true);
            }

            private function FocusOut(evt:FocusEvent):void
            {
                ToggleFocus(evt, false);
            }

            private function ToggleFocus(event:FocusEvent, State:Boolean):void
            {
                var i:int;

                var ParentGroup:Group = event.currentTarget.parent;

                for (i = 0; i < ParentGroup.numChildren; i++)
                    TT(ParentGroup.getChildAt(i)).ShowImage = State;
            }
        ]]>
    </fx:Script>

    <s:Panel
            title="Survey"
            horizontalCenter="0"
            verticalCenter="0" 
            width="1000"
            height="500">

        <s:Scroller width="100%" height="100%">
            <s:Group width="100%" height="100%">
                <s:VGroup left="20" right="20" top="20" bottom="20">

                    <s:Label>
                        <s:text>How likely are you to recommend this Product?</s:text>
                    </s:Label>

                    <s:Group>                       
                        <C:TT RadioButtonLabel="Very Likely" ShowImage="false"
                              ShortcutNumber="1" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend"></C:TT>
                        <C:TT RadioButtonLabel="Likely" ShowImage="false"
                              ShortcutNumber="2" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend" x="150"></C:TT>
                        <C:TT RadioButtonLabel="Unlikely" ShowImage="false"
                              ShortcutNumber="3" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend" x="300"></C:TT>
                        <C:TT RadioButtonLabel="Very Unlikely" ShowImage="false"
                              ShortcutNumber="4" focusIn="FocusIn(event)" focusOut="FocusOut(event)" groupName="Recommend" x="450" ></C:TT>
                    </s:Group>  

                </s:VGroup>             
            </s:Group>
        </s:Scroller> 
    </s:Panel>
</s:Application>

TT.mxml

<?xml version="1.0"?>

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   implements="mx.managers.IFocusManagerGroup">

   <fx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;
        import mx.controls.Alert;
        import mx.controls.RadioButton;
        import mx.events.FlexEvent;
        {
            [Bindable]
            public var RadioButtonLabel:String;

            [Bindable]
            public var ShowImage:Boolean;

            [Bindable]
            public var ShortcutNumber:String;

            [Bindable]
            private var _groupName:String;

            [Bindable]
            public var SelectState:Boolean;

            [Bindable]
            public var _selected:Boolean;

            public function set groupName(value:String):void
            {               
                _groupName = value;
            }

            public function get groupName():String
            {
                return _groupName;
            }

            public function set selected(value:Boolean):void
            {               
                _selected = value;
            }

            public function get selected():Boolean
            {               
                return _selected; 
            }
        }
      ]]>    
    </fx:Script>  


   <s:layout> 
      <s:HorizontalLayout 
         paddingLeft="5" paddingRight="0" 
         paddingTop="0" paddingBottom="0"/>
      </s:layout>

    <s:Label id="value" text="{ShortcutNumber}" visible="{ShowImage}" color="blue" fontWeight="bold" fontSize="16"
             horizontalCenter="true"  paddingTop="3" focusEnabled="false" />
    <s:RadioButton id="RadioButton" label="{RadioButtonLabel}" groupName="{_groupName}" selected="{_selected}" />
</s:SkinnableContainer>

Answer 1

这与RadioButton functionality in custom component的答案相同。 groupName不仅仅是一个组成的字符串，它需要引用相关RadioButtonGroup类的id字符串。在应用程序的声明中添加RadioButtonGroup，并在要分组的每个RadioButtons中将id提供给groupName。

在多个自定义组件中使用RadioButtonGroup功能

1 个答案: