Flex 4 处理深度

Question

我在 Flex 4 中有这样的代码

<!-- START >>> middle part: items -->
<mx:Canvas id="itemContainer"
           width="100%"
           height="100%">
    <!-- START >>> Items Display on the page -->
    <mx:Repeater id="richTextReapeater" 
                 dataProvider="{_model.current_day.richTextNotes}">
        <components:RichTextNoteDisplay theNote="{richTextReapeater.currentItem}" />    
    </mx:Repeater>
    <mx:Repeater id="postItReapeater" 
                 dataProvider="{_model.current_day.positNotes}">
            <components:PostItNoteDisplay theNote="{postItReapeater.currentItem}"  />   
    </mx:Repeater>
    ......
</mx:Canvas>

主要是一个 MX:Canvas，里面有我创建的多个自定义组件的中继器。大多数这些自定义组件都是这样的：

   <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          x="{theNote.x}"
                          y="{theNote.y}"
                          width="{theNote.width}"
                          height="{theNote.height}"
                          depth="{theNote.depth}"
                          rotation="{theNote.rotation}"
creationComplete="skinnablecontainer1_creationCompleteHandler(event)" >

除了深度之外，一切都工作正常（x，y，宽度，高度，旋转）！

似乎无论数字是多少，它都会显示为在父容器中呈现的顺序。 （MX：画布）！

我想要实现的是，相对于彼此， mx:Canvas 中的所有项目都按分配给它们的“深度”顺序显示。

我该怎么做？

Answer 1

您正在使用中继器；这本质上是一个循环。

听起来您好像要求循环遍历项目，但以不同的顺序处理这些项目。这是正确的吗？

我的第一个建议是，您在中继器“运行”之前研究如何按深度对 dataProvider 项目进行排序。

我的第二个建议是不要使用中继器。由于渲染器回收，基于列表的类将为您提供更好的性能。

如果您确实需要一次创建所有子项，我的第三个建议是您转向 ActionScript 实现，这将使您能够更精细地控制创建事物的方式和时间。

每次我使用中继器时我都很不高兴。

---

以下是有关 Flex 的列表和 itemRenderers 的一些信息4.

这是我如何修改此示例以使用列表而不是重复器的粗略估计：

    <!-- START >>> middle part: items -->
    <mx:Canvas id="itemContainer"
               width="100%"
               height="100%">
        <!-- START >>> Items Display on the page -->
        <s:List id="richTextList" 
                     dataProvider="{_model.current_day.richTextNotes}"
                     itemRenderer="com.something.myComponent">
        </s:List>
    </mx:Canvas>

itemRenderer 可能是这样的：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:SkinnableContainer rotation="{data.rotation}"
    creationComplete="skinnablecontainer1_creationCompleteHandler(event)" />
</s:ItemRenderer>

列表将确定渲染器的宽度、x 和 y 位置。在大多数情况下，它还将确定高度；尽管 Flex 3 列表有一个 variableRowHeight 选项。

如果您想使用基于 ATA 的不同渲染器，请考虑使用 itemRenderer函数