列表组件以调出 InputText 框

Question

我正在创建一个列表组件，每个标签上都有不同的数字，范围从 1 到 10。当单击一个数字时，我需要它来一个接一个地显示那么多输入文本框..

这几乎是一个多人游戏，你选择有多少玩家在玩，然后输入每个玩家的名字.. 我被卡住了，这太荒谬了.. 如果有人有解决方案或不同的想法，请帮助我，谢谢提前这么多。

Answer 1

有很多方法可以做到这一点。

Flash 专业方法

在 Flash Professional 的画板上创作您的观点。

包括一个列表控件，以及你想要显示的文本框，例如：

为您的组件指定属性名称，例如列表的quantityList 以及答案文本输入控件，例如answerBoxes 自定义符号内的answer1。

在代码中，您可以通过将其添加到时间线来控制答案视图的可见性：

import flash.events.Event;

quantityList.addItem({label:"1", data:1});
quantityList.addItem({label:"2", data:2});
quantityList.addItem({label:"3", data:3});
quantityList.addItem({label:"4", data:4});
quantityList.addItem({label:"5", data:5});
quantityList.addItem({label:"6", data:6});
quantityList.addItem({label:"7", data:7});
quantityList.addItem({label:"8", data:8});
quantityList.addItem({label:"9", data:9});
quantityList.addItem({label:"10", data:10});

quantityList.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(event:Event):void
{
    var numberOfQuestions = event.target.selectedItem.data as int;

    answerBoxes.answer1.visible = (numberOfQuestions > 0 ? true : false);
    answerBoxes.answer2.visible = (numberOfQuestions > 1 ? true : false);
    answerBoxes.answer3.visible = (numberOfQuestions > 2 ? true : false);
    answerBoxes.answer4.visible = (numberOfQuestions > 3 ? true : false);
    answerBoxes.answer5.visible = (numberOfQuestions > 4 ? true : false);
    answerBoxes.answer6.visible = (numberOfQuestions > 5 ? true : false);
    answerBoxes.answer7.visible = (numberOfQuestions > 6 ? true : false);
    answerBoxes.answer8.visible = (numberOfQuestions > 7 ? true : false);
    answerBoxes.answer9.visible = (numberOfQuestions > 8 ? true : false);
    answerBoxes.answer10.visible = (numberOfQuestions > 9 ? true : false);
}

运行时，可以从列表中选择项目：

Working SWF Example

Flash Pro CS5.5 FLA source code

Flex - 一种程序化方法

将数量值存储在列表数据提供程序中，并在更改时迭代添加元素：

<?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/mx">
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            import spark.components.TextInput;
            import spark.events.IndexChangeEvent;

            protected function quantityList_changeHandler(event:IndexChangeEvent):void
            {
                textInputGroup.removeAllElements();

                for (var i:uint = 0; i < quantityList.selectedItem; i++)
                {
                    textInputGroup.addElement(new TextInput());
                }
            }
        ]]>
    </fx:Script>

    <s:List id="quantityList"
            change="quantityList_changeHandler(event)"
            dataProvider="{new ArrayList([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])}" />

    <s:VGroup id="textInputGroup" />


</s:Application>

Flex - 一种声明式方法

使用 Flex 状态系统，您可以声明式地布局您的视图，然后将组件包含在所需的状态中。您还可以在动画状态之间合并转换。

<?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/mx">
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            import spark.components.TextInput;
            import spark.events.IndexChangeEvent;

            protected function quantityList_changeHandler(event:IndexChangeEvent):void
            {
                currentState = "quantity" + quantityList.selectedItem.toString();
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="quantity1" />
        <s:State name="quantity2" />
        <s:State name="quantity3" />
        <s:State name="quantity4" />
        <s:State name="quantity5" />
        <s:State name="quantity6" />
        <s:State name="quantity7" />
        <s:State name="quantity8" />
        <s:State name="quantity9" />
        <s:State name="quantity10" />
    </s:states>

    <s:List id="quantityList"
            change="quantityList_changeHandler(event)"
            dataProvider="{new ArrayList([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])}" />

    <s:VGroup id="textInputGroup">
        <s:TextInput includeIn="quantity1,quantity2,quantity3,quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity2,quantity3,quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity3,quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity4,quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity5,quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity6,quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity7,quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity8,quantity9,quantity10" />
        <s:TextInput includeIn="quantity9,quantity10" />
        <s:TextInput includeIn="quantity10" />
    </s:VGroup>

</s:Application>