预制体

这个 Prefab 的结构如下图所示：

icon、name、price 子节点之后就会用来展示图标、物品名称和价格的数据。

模板组件绑定

您在拼装 Prefab 时可以根据自己的需要自由发挥，上图中展示的仅仅是一个结构的例子。有了物品的模板结构，接下来我们需要一个组件脚本来完成节点结构的绑定。新建一个 ItemTemplate.ts 的脚本，并将其添加到刚才制作的模板节点上。该脚本内容如下：`

@ccclass
export class ItemTemplate extends Component {
  @property
  public id = 0;
  @property(Sprite)
  public icon: Sprite | null = null;
  @property(Label)
  public itemName: Label | null = null;
  @property(Label)
  public itemPrice: Label | null = null;
}

接下来将对应的节点拖拽到该组件的各个属性上：

注意 id 这个属性我们会直接通过数据赋值，不需要绑定节点。

通过数据更新模板表现

接下来我们需要继续修改 ItemTemplate.ts，为其添加接受数据后进行处理的逻辑。在上述脚本后面加入以下内容：

// data: { id, iconSF, itemName, itemPrice }
init(data: Item) {
    this.id = data.id;
    this.icon.spriteFrame = data.iconSF;
    this.itemName.string = data.itemName;
    this.itemPrice.string = data.itemPrice;
}

init 方法接受一个数据对象，并使用这个对象里的数据更新各个负责表现组件的相应属性。现在我们可以将 Item 节点保存成一个 Prefab 了，这就是我们物品的模板。

根据数据生成列表内容

现在让我们回到 ItemList.ts 脚本，接下来要添加的是物品模板 Prefab 的引用，以及动态生成列表的逻辑。

//...
@property(Prefab)
itemPrefab: Prefab | null = null;

onLoad () {
    for (let i = 0; i < this.items.length; ++i) {
        const item = instantiate(this.itemPrefab);
        const data = this.items[i];
        this.node.addChild(item);
        item.getComponent('ItemTemplate').init(data);
    }
}

在 onLoad 回调方法里，我们依次遍历 items 里存储的每个数据，以 itemPrefab 为模板生成新节点并添加到 ItemList.ts 所在节点上。之后调用 ItemTemplate.ts 里的 init 方法，更新每个节点的表现。

现在我们可以为 ItemList.ts 所在的节点添加一个 Layout 组件，通过 属性检查器 下方的 添加组件 -> UI -> Layout，然后设置 Layout 组件的以下属性：

注意前面步骤中添加 Layout 组件并不是必须的，Layout 能够帮助您自动排列列表中的节点元素，但您也可以用脚本程序来控制节点的排列。我们通常还会配合 ScrollView 滚动视图组件一起使用，