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不会将焦点设置在单个单选按钮上，而是放在单选按钮组上。您可以使用左/右或上/下键在单选按钮之间导航。这对单选按钮很有意义，因为标签键导航是单向的。

我使用您的示例创建了一个新组件 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键，焦点以这种方式循环：

第一个文字输入
第一个单选按钮组（左/右键导航）
第二个单选按钮组（此处相同）
第二个文字输入

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

希望这有帮助，祝你有个美好的一天！

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>

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

3 个答案: