如何在 Flex 中显示组件列表

Question

我正在构建一个多人游戏，当连接到服务器时，服务器会发回一个可用房间列表（每个房间都有 MaxPlayers、MinRank、TableId、TableName、Password）所以每次我收到这 5 个字符串时，我都会创建我创建的一个 Mxml UI 组件实例并用相关的详细信息填充它。

在 main.MXML 中，我添加了一个 AS3 脚本变量来保存我在从服务器返回 rcvd 数据时创建的 GameInstances 对象：

private var gameInstances:ArrayCollection = new ArrayCollection();

GameInstance.mxml 是一个组件，其中包含 UI 组件和用于设置一些数据的 AS3 脚本。 在 main.mxml 中从服务器 rcving 数据时：

var gameInstance:GameInstance = new GameInstance();
gameInstance.setTablePlayers(rcvdMsg[1]);
gameInstance.setTableMinRank(rcvdMsg[2]);
gameInstance.setTableId(rcvdMsg[3]);
gameInstance.setTableName(rcvdMsg[4]);
gameInstance.setTablePassword(rcvdMsg[5]);
gameInstances.addItem(gameInstance);

gameInstances 包含该 mxml 组件的对象。 如何在 main.mxml 上直观地显示此组件？ 我有一个 main.mxml 文件，我想在其中直观地显示 GameInstance 对象。

这就是 GameInstance.mxml 的样子，我希望 s:List 为每个游戏保存一个这样的 UI 对象（当然是为了展示它）

Answer 1

好的，如果您使用 gameInstances 数组集合作为 tableList 的数据提供者，那么您需要做一些事情。
首先，你需要让你的 gameInstances arraycollection [Bindable]

然后，您需要将数据添加到数组集合中，因为您发布的代码显示了您的身份。

接下来，您必须为您的 tableList 创建一个自定义项渲染器。

最后，当您从 gameInstances 数组集合中更改数据/添加/删除对象后，您需要 gameInstances.refresh();

[编辑]
创建一个名为 myListRenderer.mxml 的文件并将此代码放入其中

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
  <![CDATA[

  override protected function commitProperties():void{
    // this is where you assign your values
    // this function gets called every-time  the list scrolls
    super.commitProperties();
    players.text =  this.data.setTablePlayers
    minRank.text =  this.data.setTableMinRank;
    tableId.text =  this.data.setTableId;
    tableName.text =  this.data.setTableName;
    tablePassword.text =  this.data.setTablePassword;
  }

]]>
</mx:Script>

  <mx:Label id="players" />
  <mx:Label id="minRank" />
  <mx:Label id="tableId" />
  <mx:Label id="tableName" />
  <mx:Label id="tablePassword" />

</mx:VBox>

Answer 2

如果我理解这个问题，当您在 ActionScript 中创建组件时，您必须先将它们添加到容器中，然后才能在 UI 中显示它们。如果您有一个组件数组，您可以遍历该数组并将每个组件作为子组件添加到容器中。主应用程序文件是一个容器，因此您可以执行以下操作：

for each(var myComp:UIComponent in myArrayList){
  addChild(myComp);
}

采用这种方法是不寻常的。通常，您只需在创建组件时将组件添加到父容器。