跨多个自定义组件使用单选按钮组功能

Posted 2023-02-18

【中文标题】跨多个自定义组件使用单选按钮组功能

【英文标题】：Using RadioButtonGroup funcitonality across multiple custom components

【发布时间】：2018-06-16 06:21:10

【问题描述】：

我正在创建一个程序，该程序将包含一个自定义 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" 
            
            >

        <s:Scroller  >
            <s:Group  >
                <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>

【参考方案1】：

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

【讨论】：

谢谢。我已经设法通过创建一个扩展 UIcomponent 的自定义 actionscript 类而不是创建一个具有 根标记的自定义 mxml 组件来完成这项工作。当我尝试将 更改为 时，我收到关于 Label 和 Radiobutton must be in the declarations 标记的错误，因为它们没有实现 IUIComponent，我不明白。让它在一个自定义的 mxml 组件而不是一个 actionscript 组件中工作会很好。