
你的这个问题,如果基于界面大小增加这样一组组件,直接用变量控制计数也可以实现,但这样就不具有通用性,如果用list和list的ItemRenderer来解决就可以比较方便一些。谈下个人的思路,纯属个人观点。
1、做一个数据结构,如:ListData,包括UI上一行组件对应的数据,另外附加一个index作为数据索引,方便后期处理。
2、定义一个list的ItemRenderer,ItemRenderer的布局按照你UI上对应的一行进行设计。将其中的组件绑定一个DataList中的数据,这些数据默认值都为空。
3、在图片呈现的UI上,放置一个List组件,其ItemRenderer赋予(2)中定义的ItemRenderer
4、定义一个Array(Array的数据就是ListData类型),作为List的DataProvider,对应按钮“增加”和“减少”的 *** 作就是对ListDataProvider进行修改了,也即增加或者删除一条数据。右侧的呈现会以列表的方式。
5、处理右侧组件中的数据,其实就是对List的数据源进行一次遍历。通过索引可以定位到指定的行,进行相关的处理。
我做了一下,附下代码:
1)主应用的mxml文件:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009&quot
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="application1_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection
import mx.events.FlexEvent
[Bindable]
private var listDataSource:ArrayCollection
private var rowCount:Number = 0
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
listDataSource = new ArrayCollection()
rowCount += 1
var obj:DataList = new DataList()
obj.index = 1
obj.text1 = String(rowCount)
obj.text2 = idStrText.text + String(rowCount)
listDataSource.addItem(obj)
}
protected function idBtnAdd_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
rowCount += 1
var obj:DataList = new DataList()
obj.index = 1
obj.text1 = String(rowCount)
obj.text2 = idStrText.text + String(rowCount)
listDataSource.addItem(obj)
}
protected function idBtnReduce_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if(rowCount > 0)
listDataSource.removeItemAt(--rowCount)
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Label text="指定字符串" top="42" left="10" />
<s:TextInput id="idStrText" top="55" left="10" width="66" text="Text"/>
<s:Button id="idBtnAdd" label="增加" left="10" top="100" width="66"
click="idBtnAdd_clickHandler(event)"
/>
<s:Button id="idBtnReduce" label="减少" left="10" top="128" width="66"
click="idBtnReduce_clickHandler(event)"
/>
<s:List left="100" top="10" right="10" bottom="10" borderAlpha="0"
itemRenderer="CustomListRenderer"
dataProvider="{listDataSource}" />
</s:Application>
2)自定义List的ItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009&quot
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false"
>
<s:TextInput left="0" top="2" width="80" bottom="2" text="{data.text1}" />
<!--可以预先定义下拉选项的内容-->
<s:ComboBox left="84" top="2" width="120" bottom="2" selectedIndex="{data.combobox1}"/>
<s:ComboBox left="208" top="2" width="120" bottom="2" selectedIndex="{data.combobox2}" />
<s:ComboBox left="332" top="2" width="120" bottom="2" selectedIndex="{data.combobox3}" />
<s:TextInput left="454" top="2" width="80" bottom="2" text="{data.text2}" />
<s:ComboBox left="538" top="2" width="120" bottom="2" selectedIndex="{data.combobox4}" />
</s:ItemRenderer>
3)自定义数据结构DataList类:
package
{
public class DataList
{
[Bindable]
public var index:Number
[Bindable]
public var text1:String
[Bindable]
public var text2:String
[Bindable]
public var combobox1:Number
[Bindable]
public var combobox2:Number
[Bindable]
public var combobox3:Number
[Bindable]
public var combobox4:Number
public function DataList()
{
}
}
}
Array数组有splice方法比如:
var vegetables:Array = new Array("spinach",
"green pepper",
"cilantro",
"onion",
"avocado")
var spliced:Array = vegetables.splice(2, 2)//删除第三、四元素
trace(vegetables)// spinach,green pepper,avocado
trace(spliced) // cilantro,onion
添加MSHFlexgrid控件的办法如下: 要程序的代码是:Dim i, j, k As Integer 1、设置行列数 With MSHFlexGrid1 .Rows = 5 .Cols = 5 End With 2、添加表头 MSHFlexGrid1.Row = 0 For i = 1 To MSHFlexGrid1.Cols - 1 MSHFlexGrid1.Col = i MSHFle...欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)