基于 RadioButton 的组件的 Tab 键顺序问题

Question

我在 flex 中使用以下示例代码时遇到了问题：

Test.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
    <s:VGroup>
        <s:TextInput id="text1"/>
        <local:TestComponent id="tc1" />
        <local:TestComponent id="tc2" />
        <local:TestComponent id="tc3" />
        <s:TextInput id="text2"/>
    </s:VGroup>
</s:WindowedApplication>

TestComponent.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <fx:Declarations>
        <s:RadioButtonGroup id="grp"/>
    </fx:Declarations>
    <s:RadioButton id="redRadio" groupName="grp"/>
    <s:RadioButton id="yellowRadio" groupName="grp"/>
    <s:RadioButton id="greenRadio" groupName="grp"/>    
</s:Group>

当我启动应用程序并按 Tab 键循环浏览控件时，焦点跳转到第一个文本框，然后跳转到第一个 TestComponent 的第一个单选按钮，然后直接跳转到缺少第二个和第三个 TestComponents 的最后一个文本框. 这种行为对我来说似乎是错误的。谁能帮我解决这个问题？

UPD：显式设置 tabIndex 也不起作用：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
    <s:VGroup>
        <s:TextInput id="text1" tabIndex="1"/>
        <local:TestComponent id="tc1" tabIndex="2"/>
        <local:TestComponent id="tc2" tabIndex="3"/>
        <local:TestComponent id="tc3" tabIndex="4"/>
        <s:TextInput id="text2" tabIndex="5"/>
    </s:VGroup>
</s:WindowedApplication>

Answer 1

说到单选按钮，Flex 似乎并没有将焦点放在单个单选按钮上，而是放在单选按钮组上。您可以使用左/右或上/下键在单选按钮之间导航。这对单选按钮很有意义，因为 Tab 键导航是单向的。

使用您的示例，我所做的是创建一个新组件 TestComponent2.mxml 并更改无线电组 ID：

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

    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

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

    <s:RadioButton id="redRadio" groupName="grp2" />
    <s:RadioButton id="yellowRadio" groupName="grp2" />
    <s:RadioButton id="greenRadio" groupName="grp2" />
</s:Group>

另外，我替换了您 Test.mxml 文件中的第 7 行，如下所示：

<local:TestComponent2 id="tc2" />

这样它就可以正常工作了。使用 tab 键，焦点以这种方式循环：

1. 第一个文本输入

2. 第一个单选按钮组（左/右键导航）

3. 第二个单选按钮组（此处相同）

4. 第二个文本输入

因此，您似乎需要为单选按钮组分配不同的名称。

希望对您有所帮助，祝您有美好的一天！

Answer 2

您可以使用tabIndex 属性手动设置标签按钮的控件。

Answer 3

在对 Flex 源进行一些研究和调试后，我找到了解决方案。 我的错误是，我假设属性 group 和 groupName 必须对应于同一个 RadioButtonGroup 控件。但他们不必！ group 属性可以指向真正的 RadioButtonGroup 控件，对于 groupName（FocusManager 使用它来找出 RadioButton 是否属于一个组），我们可以使用一些随机生成的名称。 因此，工作代码如下所示：

TestComponent.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         initialize="init()">
    <fx:Script>
        <![CDATA[
            protected function init():void {
                var groupName:String = Math.random().toString();
                redRadio.groupName = groupName;
                yellowRadio.groupName = groupName;
                greenRadio.groupName = groupName;
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <fx:Declarations>
        <s:RadioButtonGroup id="grp"/>
    </fx:Declarations>
    <s:RadioButton id="redRadio" group="{grp}"/>
    <s:RadioButton id="yellowRadio" group="{grp}"/>
    <s:RadioButton id="greenRadio" group="{grp}"/>  
</s:Group>