1
0

Multiple tiles with images

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

View File

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

View File

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