tutorials/slint-memory-game
1
0
Fork 0
Code

Multiple tiles with images

Browse Source
This commit is contained in:
Timothy Warren 2023-05-03 14:02:17 -04:00
parent 4a6f65e9dd
commit cc5d262f9a
2 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/main_window.slint
View File

@ -1,10 +1,38 @@
import { MemoryTile } from "./memory_tile.slint"; import { TileData, MemoryTile } from "./memory_tile.slint";
export component MainWindow inherits Window { export component MainWindow inherits Window {
MemoryTile { width: 326px;
icon: @image-url("../../icons/bus.png"); 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 => { clicked => {
self.open_curtain = !self.open_curtain; tile.image_visible = !tile.image_visible;
} }
} }
} }

6
src/components/memory_tile.slint
View File

@ -1,3 +1,9 @@
export struct TileData {
image: image,
image_visible: bool,
solved: bool,
}
export component MemoryTile inherits Rectangle { export component MemoryTile inherits Rectangle {
callback clicked; callback clicked;
in property <bool> open_curtain; in property <bool> open_curtain;