UDN

Search public documentation:

CLIKMultiColListCH

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 主页 > 用户界面 & HUD > Scaleform GFx > 怎样创建一个多列列表

怎样创建一个多列列表

怎样创建一个多列列表

概述

默认的ScrollingList(滚动列表)组件使用ListItemRenderer(列表项渲染)来显示行间内容。但是ListItemRenderer(列表项渲染)只支持单个文本域。但很多情况下需要一个列表项显示多个文本域，或者甚至需要显示类似于图标这样的非文本域资源。该例说明了怎样将两个文本域添加到一个列表项的方法。

ActionScript

首先，让我们定义一下要求。我们的目标是新建一个支持两个文本域的自定义ListItemRenderer(列表项渲染线程)。该自定义ListItemRenderer(列表项渲染线程)应该同ScrollingList(滚动列表)兼容。既然打算每个列表项中有两个文本域，那么数据应该不只是一个单个字符串列表。针对这个例子，让我们使用以下dataProvider(数据供给器)：

ActionScript

list.dataProvider = [{fname: "Michael", lname: "Jordan"},
{fname: "Roger", lname: "Federer"},
{fname: "Michael", lname: "Schumacher"},
{fname: "Tiger", lname: "Woods"},
{fname: "Babe", lname: "Ruth"},
{fname: "Wayne", lname: "Gretzky"},
{fname: "Usain", lname: "Bolt"}];

这个数据供给器包含了两个属性： fname 和 lname 。这两个属性会显示在两个列表项文本域中。

既然默认ListItemRenderer(列表项渲染线程)仅支持一个文本域，它需要添加支持两个文本域的功能。实现这一功能最简单的方法就是继承ListItemRenderer(列表项渲染线程)子类。以下是一个叫做MyItemRenderer(我的项渲染线程)的源代码，它继承了ListItemRenderer类，并添加了针对两个文本域的基本支持。

(将这些代码放到一个叫 MyItemRenderer的文件中，路径为C:\UDK\UDK-2010-12\Development\Flash\CLIK\gfx\controls directory):

ActionScript

import gfx.controls.ListItemRenderer;

class gfx.controls.MyItemRenderer extends ListItemRenderer
{
  public var textField1:TextField;
  public var textField2:TextField;

  public function MyItemRenderer()
  {
    super();
  }

  public function setData(data:Object):Void
  {
    this.data = data;
    textField1.text = data ? data.fname : "";
    textField2.text = data ? data.lname : "";
  }

  private function updateAfterStateChange():Void
  {
    textField1.text = data ? data.fname : "";
    textField2.text = data ? data.lname : "";
  }
}

ListItemRenderer(列表项渲染线程)的setData()和updateAfterStateChange()方法在这个子类里进行了重载。不管什么时候列表项从它的容器列表组件中收到项的数据(ScrollingList, TileList, 等等)，都会调用setData()方法。在ListItemRenderer(列表项渲染线程)中，这个方式负责设置一个文本域的数值。相反，MyItemRenderer(我的项渲染线程)设置两个文本域的数值并内部存储该项的对象的引用。这个项的对象在updateAfterStateChange中被重复使用，它不管ListItemRenderer(列表项渲染线程)语句在什么时候进行修改时，都会被调用。这个状态的修改可能要求文本域刷新它们的数值。

修改Flash

到了这里，带有复杂列表项的dataProvider(数据供给器)和一个支持渲染这些列表项的ListItemRenderer(列表项渲染线程)类已经完成定义。要想将其他任何东西和该列表组件相关联，需要创建一个支持这一新ListItemRenderer(列表项渲染线程)类的标记。对这个事例来说，实现这个功能最快的方法就是修改预先构建的ListItemRenderer(列表项渲染线程)标记(路径为C:\UDK\UDK-2010-12\Development\Flash\CLIK\components\ListItemRende rer.fla)，使它具有实例名称为 ‘textField1’ 和‘textField2’的两个文本域。下一步就必须在库中将该标识符和类改成MyItemRenderer。

右击库中的ListItemRenderer(列表项渲染线程)并选择属性。
将名字改成： MyItemRenderer
将标识符改成： MyItemRenderer
将类改成： gfx.controls.MyItemRenderer
点击OK。
再次右击ListItemRenderer(列表项渲染线程)并选择Component Definition(组件定义)
将类改成： gfx.controls.MyItemRenderer
将这个标记复制到包含您列表的Flash库中。

使用新的多列列表

要想将MyItemRenderer 组件和您的列表结合使用，MyItemRenderer(我的项渲染线程)的复件必须在库中存在。将您列表实例的itemRenderer(项的渲染线程)可见属性改成‘MyItemRenderer’。 (通过组件查看器窗口(CS4)或展开组件参数(CS5)，两种方法均可)

现在运行FLA。列表包含显示两个标签的列表元素，它应该可见。 fname和Iname属性在dataProvider(数据供给器)中设置。