关于List

关于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>


////////////////////////////////////////////////////