记忆牌面

有了骨架代码之后，这一步来看游戏的第一个元素——记忆牌。它是 一个可视化构建块，由底层填充的矩形背景和图标图像组成。后续步骤会添加一个作为帘幕的覆盖矩形。

你将背景矩形声明为 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 元素， 它使用 @image-url() 宏加载一个图标。路径相对于 ui/app-window.slint 的位置。

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

如果你在 Linux 或 macOS 上，使用以下命令下载并解压它：

Windows

如果你在 Windows 上，使用以下命令：

PowerShell

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

powershell

这会解压出一个包含若干图标的 icons 目录。

macOS

Terminal

cd ui
curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
unzip icons.zip
cd ..

bash

这会解压出一个包含若干图标的 icons 目录。

Linux

Bash

cd ui
curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
unzip icons.zip
cd ..

bash

这会解压出一个包含若干图标的 icons 目录。

Rust

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

C++

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

NodeJS

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

Python

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