有了骨架代码后，本步骤将查看游戏的第一个元素，即记忆卡片。它是构成视觉构建块的元素，由底层填充的矩形背景和图标图像组成。后续步骤将添加一个充当帘幕的覆盖矩形。

你将背景矩形声明为 64 个逻辑像素宽和高，并填充为舒缓的蓝色调。

Slint 中的长度具有单位，这里使用 px 后缀。 这使得代码更易于阅读，并且编译器能够检测到你意外混合了具有不同单位的值。

将以下代码复制到 ui/app-window.slint 文件中，替换当前内容：

component MemoryTile inherits Rectangle {    width: 64px;    height: 64px;    background: #3960D5;
    Image {        source: @image-url("icons/bus.png");        width: parent.width;        height: parent.height;    }}
export component MainWindow inherits Window {    MemoryTile {}}

这会导出 MainWindow 组件，以便稍后游戏逻辑代码可以访问它。

在 Rectangle 内部放置一个使用 @image-url() 宏加载图标的 Image 元素。该路径相对于 ui/app-window.slint 的位置。

你需要先安装此图标以及稍后使用的其它图标。你可以将预先准备好的 Zip 归档 下载到 ui 文件夹。

如果你使用的是 Linux 或 macOS，请使用以下命令下载并解压：

• Windows
• macOS
• Linux

如果你使用的是 Windows，请使用以下命令：

PowerShell

cd uipowershell curl -Uri https://slint.dev/blog/memory-game-tutorial/icons.zip -Outfile icons.zippowershell Expand-Archive -Path icons.zip -DestinationPath .cd ..

powershell

这将解压出一个包含多个图标的 icons 目录。

Terminal

cd uicurl -O https://slint.dev/blog/memory-game-tutorial/icons.zipunzip icons.zipcd ..

这将解压出一个包含多个图标的 icons 目录。

Bash

cd uicurl -O https://slint.dev/blog/memory-game-tutorial/icons.zipunzip icons.zipcd ..

这将解压出一个包含多个图标的 icons 目录。

• C++
• NodeJS
• Rust
• Python

使用 cmake --build build 编译程序并使用 ./build/my_application 运行，会打开一个窗口，在蓝色背景上显示一个公共汽车图标。

使用 npm start 运行程序，会打开一个窗口，在蓝色背景上显示一个公共汽车图标。

使用 cargo run 运行程序，会打开一个窗口，在蓝色背景上显示一个公共汽车图标。

使用 uv run main.py 运行程序，会打开一个窗口，在蓝色背景上显示一个公共汽车图标。