我正在创建一个列表组件,每个标签上都有不同的数字,范围从 1 到 10。当单击一个数字时,我需要它一个接一个地显示那么多输入文本框。
这几乎是一个多人游戏,您选择要玩多少玩家,然后输入每个名字..我被卡住了,这太荒谬了..如果有人有解决方案或不同的想法,请帮助我,非常感谢提前。
我正在创建一个列表组件,每个标签上都有不同的数字,范围从 1 到 10。当单击一个数字时,我需要它一个接一个地显示那么多输入文本框。
这几乎是一个多人游戏,您选择要玩多少玩家,然后输入每个名字..我被卡住了,这太荒谬了..如果有人有解决方案或不同的想法,请帮助我,非常感谢提前。
有很多方法可以做到这一点。
Flash 专业方法
在 Flash Professional 的艺术板上创作您的观点。
包括一个列表控件,以及您要显示的文本框,例如:
为您的组件提供属性名称,例如quantityList
列表以及答案文本输入控件,例如answer1
在answerBoxes
自定义符号内。
在代码中,您可以通过将其添加到时间线来控制答案视图的可见性:
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);
}
运行时,您可以从列表中选择项目:
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>