mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-01 06:11:16 +00:00
Small consistency fixes and typos across quickstarts (#4813)
This commit is contained in:
parent
10afbbbfbb
commit
0095d65696
20 changed files with 71 additions and 66 deletions
|
@ -7,8 +7,8 @@ game. There is much more to Slint, such as layouts, widgets, or styling.
|
|||
|
||||
We recommend the following links to continue:
|
||||
|
||||
- [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected several demos and examples. These are a great starting point to learn how to use many Slint features.
|
||||
- [Examples](https://github.com/slint-ui/slint/tree/master/examples): The Slint repository has several 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.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.
|
||||
- [Slint Interpreter API Docs](https://slint.dev/docs/rust/slint_interpreter/): The reference documentation for the Rust crate that allows you to dynamically load Slint files.
|
||||
|
|
|
@ -18,13 +18,13 @@ The code takes the list of tiles, duplicates it, and shuffles it, accessing the
|
|||
|
||||
For each top-level property,
|
||||
Slint generates a getter and a setter function. In this case `get_memory_tiles` and `set_memory_tiles`.
|
||||
Since `memory_tiles` is a Slint array, it's represented as a [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.Model).
|
||||
Since `memory_tiles` is a Slint array represented as a [`Rc<dyn slint::Model>`](https://slint.dev/docs/rust/slint/trait.Model).
|
||||
|
||||
You can't change the model generated by Slint, but you can extract the tiles from it and put them
|
||||
in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.VecModel) which implements the `Model` trait.
|
||||
`VecModel` lets you make changes and you can use it to replace the static generated model.
|
||||
|
||||
Note that you clone the `tiles_model` because you'll use it later to update the game logic.
|
||||
The code clones the `tiles_model` because you use it later to update the game logic.
|
||||
|
||||
Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide
|
||||
the icons when a player clicks on them.
|
||||
|
|
|
@ -14,7 +14,7 @@ After modeling a single tile, this step creates a grid of them. For the grid to
|
|||
With Slint you declare an array of structures based on a model using square brackets. Use a <span class="hljs-keyword">for</span> loop
|
||||
to create multiple instances of the same element.
|
||||
|
||||
With Slint the for loop is declarative and automatically updates when
|
||||
The <span class="hljs-keyword">for</span> loop is declarative and automatically updates when
|
||||
the model changes. The loop instantiates all the <span class="hljs-title">MemoryTile</span> elements and places them on a grid based on their
|
||||
index with spacing between the tiles.
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
# Game Logic In Rust
|
||||
|
||||
This step implements the rules of the game in Rust as well.
|
||||
This step implements the rules of the game in Rust.
|
||||
|
||||
Slint's general philosophy is that you implement the user interface in Slint and the business logic in your favorite programming
|
||||
language.
|
||||
|
@ -23,7 +23,7 @@ tile interaction, to prevent the player from opening more tiles than allowed. No
|
|||
|
||||
The last change to the code is to act when the <span class="hljs-title">MemoryTile</span> signals that a player clicked it.
|
||||
|
||||
Add the following handler in <span class="hljs-title">MainWindow</span>:
|
||||
Add the following handler in the <span class="hljs-title">MainWindow</span> `for` loop `clicked` handler:
|
||||
|
||||
```slint
|
||||
{{#include main_game_logic_in_rust.rs:tile_click_logic}}
|
||||
|
|
|
@ -2,7 +2,10 @@
|
|||
|
||||
# Getting Started
|
||||
|
||||
This tutorial assumes that you are somewhat familiar with Rust. We recommend using [rust-analyzer](https://rust-analyzer.github.io) and [our editor integrations for `.slint` files](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
|
||||
This tutorial uses Rust as the host programming language. Slint also supports other programming languages like
|
||||
[C++](https://slint.dev/docs/cpp/) or [JavaScript](https://slint.dev/docs/node/).
|
||||
|
||||
We recommend using [rust-analyzer](https://rust-analyzer.github.io) and [our editor integrations for Slint](https://github.com/slint-ui/slint/tree/master/editors) for following this tutorial.
|
||||
|
||||
Slint has an application template you can use to create a project with dependencies already set up that follows recommended best practices.
|
||||
|
||||
|
@ -14,13 +17,12 @@ cargo install cargo-generate
|
|||
|
||||
Use the template to create a new project with the following command:
|
||||
|
||||
|
||||
```sh
|
||||
cargo generate --git https://github.com/slint-ui/slint-rust-template --name memory
|
||||
cd memory
|
||||
```
|
||||
|
||||
Replace the contents of `src/main.rs` with the hello world program from the [Slint documentation](https://slint.dev/docs/rust/slint/):
|
||||
Replace the contents of `src/main.rs` with the following:
|
||||
|
||||
```rust,noplayground
|
||||
{{#include main_initial.rs:main}}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
# Introduction
|
||||
|
||||
This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the `.slint` language for the graphics with the game rules implemented in Rust.
|
||||
This tutorial introduces you to the Slint UI framework in a playful way by implementing a memory game. It combines the Slint language for the graphics with the game rules implemented in Rust.
|
||||
|
||||
The game consists of a grid of 16 rectangular tiles. Clicking on a tile uncovers an icon underneath.
|
||||
There are 8 different icons in total, so each tile has a sibling somewhere in the grid with the
|
||||
|
|
|
@ -2,31 +2,31 @@
|
|||
|
||||
# Memory Tile
|
||||
|
||||
With the skeleton in place, this step looks at the first element of the game, the memory tile. It's the
|
||||
With the skeleton code in place, this step looks at the first element of the game, the memory tile. It's the
|
||||
visual building block that consists of an underlying filled rectangle background, the icon image. Later steps add a covering rectangle that acts as a curtain.
|
||||
|
||||
Declare the background rectangle as 64 logical pixels wide and tall
|
||||
You declare the background rectangle as 64 logical pixels wide and tall
|
||||
filled with a soothing tone of blue.
|
||||
|
||||
Note how lengths in the `.slint` language have a unit, here the `px` suffix.
|
||||
Lengths in Slint have a unit, here, the `px` suffix.
|
||||
This makes the code easier to read and the compiler can detect when you accidentally
|
||||
mix values with different units attached to them.
|
||||
|
||||
Copy the following code inside of the `slint!` macro, replacing the current content:
|
||||
|
||||
```slint
|
||||
{{#include main_mem ory_tile.rs:tile}}
|
||||
{{#include main_memory_tile.rs:tile}}
|
||||
```
|
||||
|
||||
Inside the <span class="hljs-built_in">Rectangle</span> place an <span class="hljs-built_in">Image</span> element that
|
||||
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 that contains the `Cargo.toml` file.
|
||||
When using `.slint` files, it's relative to the folder of the `.slint` file containing it.
|
||||
When using Slint files, it's relative to the folder of the Slint file containing it.
|
||||
|
||||
You need to install this icon and others you use later first. You can download a pre-prepared
|
||||
[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) and extract it with the
|
||||
following two commands:
|
||||
following commands:
|
||||
|
||||
```sh
|
||||
curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
|
||||
|
@ -35,7 +35,7 @@ unzip icons.zip
|
|||
|
||||
This unpacks an `icons` directory containing several icons.
|
||||
|
||||
Running the program with `cargo run` now opens a window that shows the icon of a bus on a
|
||||
Running the program with `cargo run` opens a window that shows the icon of a bus on a
|
||||
blue background.
|
||||
|
||||

|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue