关于List
这里有一个如何在适当的地方扩展列表元素 的一个小示例。这个事例用CheckBox（多选框）作为List 的itemRenderer，当你选中一个多选框时，List中的条目会扩展以显示更多的信息。如下图：
这个itemRenderer实际上是一个Canvas容器，它有一个CheckBox子元素。这个itemRenderer使用了状态（states），初始的状态（state）包含这个CheckBox，“扩展了的状态（expandedState）”包含了一个列表。这里使用了一个过渡（tansition），通过Resize效果来隐藏和显示这个列表。
这个列表的variableRowHeight属性（译注：这个属性是个布尔值，表示列表的行高是否可变，如为true则可变）必须设置为true，否则它就不会工作。
主程序
让我们以这个叫作“ExpandList.mxml”的主程序开始吧
程序代码
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// This collection shows just the title in the list as a CheckBox. When
// one is checked, it expands to review the models array.
[Bindable]
public var dp:ArrayCollection = new ArrayCollection(
[ {title:"Ford", models:["Fusion","Taurus","Mustang"]},
{title:"Volkswagen", models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
{title:"Infiniti",models:["FX35","GX35","Q45","M35"]},
{title:"Audi",models:["A3","A4","A6"]}
]);
]]>
</mx:Script>
<!-- Simple list with 2 important points:
1. variableRowHeight = "true" allows for rows to be of differing height
2. itemRenderer = "DetailItem" specifies the DetailItem.mxml as the renderer
-->
<mx:List dataProvider="{dp}" width="270" height="315"
horizontalCenter="0"
verticalCenter="0"
columnCount="1"
columnWidth="250"
variableRowHeight="true"
itemRenderer="DetailItem"
selectionColor="0xFFFFFF"/>
</mx:Application>
可以看到，脚本块只是定义了一个ArrayCollection，假设这些信息是通过呼叫data services之后得到的返回结果。
这个列表被定义了，并且以这个ArrayCollection作为它的dataProvider，它的variableRowHeight属性也被设成了true。ItemRenderer则被设置成了一个类名：“DetailItem”。
The ItemRenderer
下面将会给出DetailItem 组件。为了更好的可读性，我将会把代码分成几部分。你可以把它们组合起来得到可以工作的代码。
程序代码
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" width="201" height="36">
<!-- This is the base state and it just defines the simple checkbox
-->
<mx:CheckBox x="10" y="10" label="{data.title}" width="181"
click="changeState(event)"/>
这个组件继承了Canvas。这是个很好的选择，因为Canvas不会对它内部的控件布局强加任何约束。当你创建一个itemRenderer时，考虑一下你想要在元素定位上花费多少努力。举个例子，如果你想要你的renderer中的所有组件在一条线上，用Hbox。因为我们创建的这个组件将会改变大小，所以Canvas是最好的选择。
这里定义了一个单一的交替状态（开始是默认的基础状态），“expandedState”。你可以看到那里有两个元素。SetProperty改变这个组件（Canvas）的高度。第二个元素添加了一个以ac数据成员作为它的数据提供者（dataProvider）的List。
程序代码
<mx:states>
<mx:State name="expandedState">
<mx:SetProperty name="height" value="123"/>
<mx:AddChild position="lastChild">
<mx:List left="10" y="36" right="10" dataProvider="{ac}" height="77"></mx:List>
</mx:AddChild>
</mx:State>
</mx:states>
这个脚本模块定义了ac这个ArrayCollection和一个CheckBox（参考上面）的事件触发器。当这个复选框被选中的时候，currentState（当前状态）就变成了“expandedState”，触发了上面定义的状态中的那些元素，改变了高度并添加了一个List。
程序代码
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var ac:ArrayCollection;
private function changeState(event:flash.events.Event) : void
{
if( event.target.selected )
currentState = "expandedState";
else
currentState = "";
}
// the setting of the data property is overridden to create the
// ArrayCollection from the Array of models listed in the dataProvider
// this this List.
override public function set data(value:Object) : void
{
super.data = value;
ac = new ArrayCollection(value.models);
}
]]>
</mx:Script>
Transition（过渡）定义了state将会怎样变化。Transition是可选的，它给变化加上了效果。首先你可以运行这个例子而不用transition，你就会实实在在地看到这个transition做了什么。transition做的所有工作就是提供更好的视觉体验。
当你不用transition运行这个程序时，点击CheckBox只是使Canvas变大并出现了List。
现在使用transition并运行这个例子。当你点击CheckBox时，List会平滑地打开，并显示其中的元素。再点击CheckBox的时候List又平滑地收了回去。
其中的fromState和toState都设成了通配符：*，这就是说无论从哪个状态变成哪个状态，这个transition都会被应用。这个transition只是一个针对整个组件（Canvas）的Resize效果。有趣的是Flex将会描绘出Resize效果前的大小和效果后的大小，而不用在Resize标签中去定义它。
程序代码
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{this}" />
</mx:Transition>
</mx:transitions>
最后，写上相应的Canvas标签完成这个组件。
程序代码
</mx:Canvas>
简单总结
你可以在任何地方更多地应用状态（States）和过渡（transition），比如在一个itemRenderer里。Transitions让用户体验变得更好并且不需要写太多的代码。状态（States）和过渡（transition）可以变得很复杂。我建议您从一些简单的东西开始，比如这个例子，并渐渐熟悉它们。或许你可以为这个例子添加另外一个state并应用一个不同的tansition。
<mx:List x="10" y="10" dataProvider="{array_data}"></mx:List> ...
<mx:List x="429" y="10" dataProvider="{myData}" labelField="label" width="174"></mx:List>
这里有一个如何在适当的地方扩展列表元素 的一个小示例。这个事例用CheckBox（多选框）作为List 的itemRenderer，当你选中一个多选框时，List中的条目会扩展以显示更多的信息。如下图：
这个itemRenderer实际上是一个Canvas容器，它有一个CheckBox子元素。这个itemRenderer使用了状态（states），初始的状态（state）包含这个CheckBox，“扩展了的状态（expandedState）”包含了一个列表。这里使用了一个过渡（tansition），通过Resize效果来隐藏和显示这个列表。
这个列表的variableRowHeight属性（译注：这个属性是个布尔值，表示列表的行高是否可变，如为true则可变）必须设置为true，否则它就不会工作。
主程序
让我们以这个叫作“ExpandList.mxml”的主程序开始吧
程序代码
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// This collection shows just the title in the list as a CheckBox. When
// one is checked, it expands to review the models array.
[Bindable]
public var dp:ArrayCollection = new ArrayCollection(
[ {title:"Ford", models:["Fusion","Taurus","Mustang"]},
{title:"Volkswagen", models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
{title:"Infiniti",models:["FX35","GX35","Q45","M35"]},
{title:"Audi",models:["A3","A4","A6"]}
]);
]]>
</mx:Script>
<!-- Simple list with 2 important points:
1. variableRowHeight = "true" allows for rows to be of differing height
2. itemRenderer = "DetailItem" specifies the DetailItem.mxml as the renderer
-->
<mx:List dataProvider="{dp}" width="270" height="315"
horizontalCenter="0"
verticalCenter="0"
columnCount="1"
columnWidth="250"
variableRowHeight="true"
itemRenderer="DetailItem"
selectionColor="0xFFFFFF"/>
</mx:Application>
可以看到，脚本块只是定义了一个ArrayCollection，假设这些信息是通过呼叫data services之后得到的返回结果。
这个列表被定义了，并且以这个ArrayCollection作为它的dataProvider，它的variableRowHeight属性也被设成了true。ItemRenderer则被设置成了一个类名：“DetailItem”。
The ItemRenderer
下面将会给出DetailItem 组件。为了更好的可读性，我将会把代码分成几部分。你可以把它们组合起来得到可以工作的代码。
程序代码
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" width="201" height="36">
<!-- This is the base state and it just defines the simple checkbox
-->
<mx:CheckBox x="10" y="10" label="{data.title}" width="181"
click="changeState(event)"/>
这个组件继承了Canvas。这是个很好的选择，因为Canvas不会对它内部的控件布局强加任何约束。当你创建一个itemRenderer时，考虑一下你想要在元素定位上花费多少努力。举个例子，如果你想要你的renderer中的所有组件在一条线上，用Hbox。因为我们创建的这个组件将会改变大小，所以Canvas是最好的选择。
这里定义了一个单一的交替状态（开始是默认的基础状态），“expandedState”。你可以看到那里有两个元素。SetProperty改变这个组件（Canvas）的高度。第二个元素添加了一个以ac数据成员作为它的数据提供者（dataProvider）的List。
程序代码
<mx:states>
<mx:State name="expandedState">
<mx:SetProperty name="height" value="123"/>
<mx:AddChild position="lastChild">
<mx:List left="10" y="36" right="10" dataProvider="{ac}" height="77"></mx:List>
</mx:AddChild>
</mx:State>
</mx:states>
这个脚本模块定义了ac这个ArrayCollection和一个CheckBox（参考上面）的事件触发器。当这个复选框被选中的时候，currentState（当前状态）就变成了“expandedState”，触发了上面定义的状态中的那些元素，改变了高度并添加了一个List。
程序代码
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var ac:ArrayCollection;
private function changeState(event:flash.events.Event) : void
{
if( event.target.selected )
currentState = "expandedState";
else
currentState = "";
}
// the setting of the data property is overridden to create the
// ArrayCollection from the Array of models listed in the dataProvider
// this this List.
override public function set data(value:Object) : void
{
super.data = value;
ac = new ArrayCollection(value.models);
}
]]>
</mx:Script>
Transition（过渡）定义了state将会怎样变化。Transition是可选的，它给变化加上了效果。首先你可以运行这个例子而不用transition，你就会实实在在地看到这个transition做了什么。transition做的所有工作就是提供更好的视觉体验。
当你不用transition运行这个程序时，点击CheckBox只是使Canvas变大并出现了List。
现在使用transition并运行这个例子。当你点击CheckBox时，List会平滑地打开，并显示其中的元素。再点击CheckBox的时候List又平滑地收了回去。
其中的fromState和toState都设成了通配符：*，这就是说无论从哪个状态变成哪个状态，这个transition都会被应用。这个transition只是一个针对整个组件（Canvas）的Resize效果。有趣的是Flex将会描绘出Resize效果前的大小和效果后的大小，而不用在Resize标签中去定义它。
程序代码
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{this}" />
</mx:Transition>
</mx:transitions>
最后，写上相应的Canvas标签完成这个组件。
程序代码
</mx:Canvas>
简单总结
你可以在任何地方更多地应用状态（States）和过渡（transition），比如在一个itemRenderer里。Transitions让用户体验变得更好并且不需要写太多的代码。状态（States）和过渡（transition）可以变得很复杂。我建议您从一些简单的东西开始，比如这个例子，并渐渐熟悉它们。或许你可以为这个例子添加另外一个state并应用一个不同的tansition。
<mx:List x="10" y="10" dataProvider="{array_data}"></mx:List> ...
<mx:List x="429" y="10" dataProvider="{myData}" labelField="label" width="174"></mx:List>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
