【问题标题】:Extending a spark list in Flex 4.5在 Flex 4.5 中扩展火花列表
【发布时间】:2011-09-05 10:21:01
【问题描述】:

我需要通过扩展 spark 列表类在 Flex 4.5 中创建自定义组件。基本上,我想添加一个名为“title”的 UIComponent 类型的新变量。设置此变量后,我需要将其呈现在列表顶部。

这会给我一个带有可配置标题组件的列表,该组件会随列表滚动。应该很简单,但我不知道它是如何完成的。我已经查看了 spark.components.Listspark.skins.mobile.ListSkin 的层次结构,并阅读了一些关于皮肤的文章,但所有的教程都是极其简化,不展示如何做这样的事情。

有什么帮助吗?谢谢

【问题讨论】:

    标签: apache-flex flex4.5


    【解决方案1】:

    我会研究以下弹性 POC:iOS Theme。列表中有多个部分,但您可以下载页面上的示例项目。该组件称为 ListForm,它包含一个外观、一个 ActionScript 组件和一个 Item Renderer。 IR 不太重要,您可以创建自己的符合您需要的内容,但 ListForm.as 文件和相应的皮肤几乎可以满足您的需要。

    【讨论】:

    • 你这个人。这不仅展示了如何在一个清晰且功能齐全的示例中解决我的特定问题,它还有许多其他有趣的花絮可供研究和应用。谢谢!
    • 没问题,我很高兴你能得到你需要的帮助:)
    【解决方案2】:

    只需创建一个新皮肤;并在 DataGroup 上方添加标题部分。

    您不需要扩展 List 类,除非您想添加与您的标题相关的新属性。

    这正是我们为Mobile Flex DropDownList 所做的。单击“更改皮肤”按钮并选择 PopUpSkin 2。然后打开下拉菜单;您将在弹出窗口中列出列表上方的标题和下方的取消按钮。

    在实践中,直接使用 UIcomponent 是很奇怪的。您能否进一步扩展您想在标题中添加的内容?

    【讨论】:

    • 感谢您的回答。我查看了您的示例,但是当我查看源代码时,我看不到 com.flextras.mobile.dropDownList.skins.DropDownListMobileSkin_PopUp_2 的源代码,这就是操作所在。此外,您添加的标题只是保持固定,而我需要一个在用户向下滚动列表时滚动的标题。例如,看一下 iPhone 上的“联系人”应用程序。它有一个标题,里面有一个搜索控件,向下滚动时会消失。
    • @tom__26 源码仅供购买者使用;样本仅供参考。我没有 iPhone,因此无法提供有关其实施的细节。 List 只滚动它的 dataProvider 中的项目;因此您可以在 dataProvider 中为您的“标题”添加一个元素。一个 itemRendererFunction 可以用来渲染它而不是你的 defaultrenderer。或者,您可以使用包含“标题”和数据组的组的滚动器来解决问题。然后它应该在您滚动时滚动“标题”。
    • 是的,在此之前,我完全按照您所说的进行了尝试:一个 Scroller、一个 Group 和 Header + List 内部(verticalScrollPolicy 设置为“off”),但我遇到了问题。我在这个网站上有另一个关于这个问题的帖子,还没有真正的解决方案。关于您的建议:我尝试扩展 ListSkin 并输入此代码:override protected function createChildren():void { super.createChildren(); var headerList:HeaderList = hostComponent as HeaderList; if(headerList.header != null) { addChild(headerList.header); } } 但没有任何显示。
    • 我其实说的是DataGroup;不是列表。它们是两个不同的组件。 List 有一个嵌入的 Scroller,而 DataGroup 没有。那就是说;为什么不在您的 ListSkin 中使用 MXML 而不是尝试在 AS3 中创建它? MXML 将变得更加容易。你添加孩子的方法看起来很复杂。一个组件应该维护它自己的孩子,你应该在它的皮肤上添加孩子;不在 hostComponent 上。
    • 我还要补充一点,您的所有其他问题都标记为已回答;所以我不确定你指的还有什么其他问题还没有答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多