Skip to content
Slint Docs

由单牌到多牌

在对单张牌建模之后，这一步将创建由这些牌组成的网格。要让网格成为游戏棋盘，你需要两个特性：

  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 索引，根据牌所在的行和列来计算其位置， 使用取模和整数除法来创建 4×4 网格。

运行这段代码会打开一个窗口，显示 8 张牌，玩家可以逐一打开它们。

© 2026 SixtyFPS GmbH