mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-08 19:40:37 +00:00
Domain: slint-ui.com -> slint.dev
This commit is contained in:
Olivier Goffart
Olivier Goffart
parent
24c822dd60
commit
11dea135f7
1248 changed files with 1542 additions and 1542 deletions
|
|
@ -1,5 +1,5 @@
|
|||
[book]
|
||||
authors = ["Slint Developers <info@slint-ui.com>"]
|
||||
authors = ["Slint Developers <info@slint.dev>"]
|
||||
language = "en"
|
||||
multilingual = false
|
||||
src = "src"
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
# Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
# Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
# SPDX-License-Identifier: MIT
|
||||
|
||||
[package]
|
||||
name = "src"
|
||||
version = "1.1.0"
|
||||
authors = ["Slint Developers <info@slint-ui.com>"]
|
||||
authors = ["Slint Developers <info@slint.dev>"]
|
||||
edition = "2021"
|
||||
license = "MIT"
|
||||
description = "Binaries for Rust version of Memory Tutorial of Slint"
|
||||
repository = "https://github.com/slint-ui/slint"
|
||||
homepage = "https://slint-ui.com"
|
||||
homepage = "https://slint.dev"
|
||||
publish = false
|
||||
|
||||
[[bin]]
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ We recommend the following links to continue:
|
|||
|
||||
* [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected a few demos and examples. These are a great starting point to learn how to use many Slint features.
|
||||
* [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
|
||||
* [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint-ui.com/demos/memory/" target="_blank">play the wasm version</a> in your browser.
|
||||
* [Slint API Docs](https://slint-ui.com/docs/rust/slint/): The reference documentation for the main Rust crate.
|
||||
* [Slint Interpreter API Docs](https://slint-ui.com/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load `.slint` files.
|
||||
* [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
|
||||
* [Slint API Docs](https://slint.dev/docs/rust/slint/): The reference documentation for the main Rust crate.
|
||||
* [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for Rust crate that allows you to dynamically load `.slint` files.
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ cargo add rand@0.8
|
|||
What we'll do is take the list of tiles declared in the .slint language, duplicate it, and shuffle it.
|
||||
We'll do so by accessing the `memory_tiles` property through the Rust code. For each top-level property,
|
||||
a getter and a setter function is generated - in our case `get_memory_tiles` and `set_memory_tiles`.
|
||||
Since `memory_tiles` is an array in the `.slint` language, it's represented as a [`Rc<dyn slint::Model>`](https://slint-ui.com/docs/rust/slint/trait.model).
|
||||
Since `memory_tiles` is an array in the `.slint` language, it's represented as a [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.model).
|
||||
We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it
|
||||
in a [`VecModel`](https://slint-ui.com/docs/rust/slint/struct.vecmodel) which implements the `Model` trait.
|
||||
in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.vecmodel) which implements the `Model` trait.
|
||||
`VecModel` allows us to make modifications and we can use it to replace the static generated model.
|
||||
|
||||
We modify the main function like so:
|
||||
|
|
@ -26,4 +26,4 @@ Note that we clone the `tiles_model` because we'll use it later to update the ga
|
|||
Running this gives us a window on the screen that now shows a 4 by 4 grid of rectangles, which can show or obscure
|
||||
the icons when clicking. There's only one last aspect missing now, the rules for the game.
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>
|
||||
|
|
|
|||
|
|
@ -30,4 +30,4 @@ using the modulo and integer division to create a 4 by 4 grid.
|
|||
|
||||
Running this gives us a window that shows 8 tiles, which can be opened individually.
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/from-one-to-multiple-tiles.mp4"></video>
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/from-one-to-multiple-tiles.mp4"></video>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Insert this code before the `main_window.run()` call:
|
|||
{{#include main_game_logic_in_rust.rs:game_logic}}
|
||||
```
|
||||
|
||||
Notice that we take a [Weak](https://slint-ui.com/docs/rust/slint/struct.weak) pointer of our `main_window`. This is very
|
||||
Notice that we take a [Weak](https://slint.dev/docs/rust/slint/struct.weak) pointer of our `main_window`. This is very
|
||||
important because capturing a copy of the `main_window` itself within the callback handler would result in a circular ownership.
|
||||
The `MainWindow` owns the callback handler, which itself owns a reference to the `MainWindow`, which must be weak
|
||||
instead of strong to avoid a memory leak.
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Then we edit `Cargo.toml` to add the slint dependency using `cargo add`:
|
|||
cargo add slint@1.1.0
|
||||
```
|
||||
|
||||
Finally we copy the hello world program from the [Slint documentation](https://slint-ui.com/docs/rust/slint/) into our `src/main.rs`:
|
||||
Finally we copy the hello world program from the [Slint documentation](https://slint.dev/docs/rust/slint/) into our `src/main.rs`:
|
||||
|
||||
```rust,noplayground
|
||||
{{#include main_initial.rs:main}}
|
||||
|
|
@ -26,4 +26,4 @@ Finally we copy the hello world program from the [Slint documentation](https://s
|
|||
|
||||
We run this example with `cargo run` and a window will appear with the green "Hello World" greeting.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
The game is visually a little bare. Here are some ideas how you could make further changes to enhance it:
|
||||
|
||||
- The tiles could have rounded corners, to look a little less sharp. The [border-radius](https://slint-ui.com/docs/slint/src/builtins/elements.html#rectangle)
|
||||
- The tiles could have rounded corners, to look a little less sharp. The [border-radius](https://slint.dev/docs/slint/src/builtins/elements.html#rectangle)
|
||||
property of _Rectangle_ can be used to achieve that.
|
||||
|
||||
- In real world memory games, the back of the tiles often have some common graphic. You could add an image with
|
||||
the help of another _[Image](https://slint-ui.com/docs/slint/src/builtins/elements.html#image)_
|
||||
the help of another _[Image](https://slint.dev/docs/slint/src/builtins/elements.html#image)_
|
||||
element. Note that you may have to use _Rectangle_'s _clip property_
|
||||
element around it to ensure that the image is clipped away when the curtain effect opens.
|
||||
|
||||
|
|
|
|||
|
|
@ -10,5 +10,5 @@ If you uncover two tiles with the same icon, then they remain visible - they're
|
|||
|
||||
This is how the game looks like in action:
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/memory_clip.mp4"
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/memory_clip.mp4"
|
||||
class="img-fluid img-thumbnail rounded"></video>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#[allow(dead_code)]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#[allow(dead_code)]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#[allow(dead_code)]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#[allow(dead_code)]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#[allow(dead_code)]
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#[allow(dead_code)]
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ loads an icon with the <span class="hljs-built_in">@image-url()</span> macro.
|
|||
When using the `slint!` macro, the path is relative to the folder in which the Cargo.toml is located.
|
||||
When using .slint files, it's relative to the folder of the .slint file containing it.
|
||||
This icon and others we're going to use later need to be installed first. You can download a
|
||||
[Zip archive](https://slint-ui.com/blog/memory-game-tutorial/icons.zip) that we have prepared and extract it with the
|
||||
[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) that we have prepared and extract it with the
|
||||
following two commands:
|
||||
|
||||
```sh
|
||||
curl -O https://slint-ui.com/blog/memory-game-tutorial/icons.zip
|
||||
curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
|
||||
unzip icons.zip
|
||||
```
|
||||
|
||||
|
|
@ -31,4 +31,4 @@ This should unpack an `icons` directory containing a bunch of icons.
|
|||
Running the program with `cargo run` gives us a window on the screen that shows the icon of a bus on a
|
||||
blue background.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -32,4 +32,4 @@ from our business logic.
|
|||
Running this gives us a window on the screen with a rectangle that opens up to show us the bus icon, when clicking on
|
||||
it. Subsequent clicks will close and open the curtain again.
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/polishing-the-tile.mp4"></video>
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/polishing-the-tile.mp4"></video>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue