在对单个拼图块进行建模之后，本步骤将创建一个由这些拼图块组成的网格。要使该网格成为游戏板，你需要两个功能：

1. 数据模型：在代码中作为模型创建的数组，其中每个元素描述拼图块的数据结构，例如：

   • 图像的 URL
   • 图像是否可见
   • 玩家是否已解开此拼图块。

2. 一种创建多个拼图块实例的方法。

使用 Slint，你可以通过方括号声明一个基于模型的结构体数组。使用 for 循环 创建同一元素的多个实例。

for 循环是声明式的，并在模型发生变化时自动更新。该循环会实例化所有 MemoryTile 元素，并根据它们的索引将它们放置在网格上，块与块之间有间距。

首先，在 ui/app-window.slint 文件顶部添加拼图块数据结构定义：

struct TileData {    image: image,    image_visible: bool,    solved: bool,}

接下来，将 ui/app-window.slint 文件底部的 _export component MainWindow inherits Window { … } 部分替换为以下内容：

export component MainWindow inherits Window {    width: 326px;    height: 326px;
    in property <[TileData]> memory_tiles: [        { image: @image-url("icons/at.png") },        { image: @image-url("icons/balance-scale.png") },        { image: @image-url("icons/bicycle.png") },        { image: @image-url("icons/bus.png") },        { image: @image-url("icons/cloud.png") },        { image: @image-url("icons/cogs.png") },        { image: @image-url("icons/motorcycle.png") },        { image: @image-url("icons/video.png") },    ];    for tile[i] in memory_tiles : MemoryTile {        x: mod(i, 4) * 74px;        y: floor(i / 4) * 74px;        width: 64px;        height: 64px;        icon: tile.image;        open_curtain: tile.image_visible || tile.solved;        // propagate the solved status from the model to the tile        solved: tile.solved;        clicked => {            tile.image_visible = !tile.image_visible;        }    }}

for tile[i] in memory_tiles: 语法声明了一个变量 tile，它包含来自 memory_tiles 数组中一个元素的数据， 以及一个变量 i，它是该拼图块的索引。代码使用 i 索引来根据拼图块所在的行和列计算其位置， 通过取模和整数除法创建一个 4x4 的网格。

运行代码会打开一个窗口，显示 8 个拼图块，玩家可以单独打开它们。