Slint Kit Documentation

Retour et progression

Indicateur de chargement pour Slint

KitSpinner · Slint Kit 0.3.0

Indicateur d’activité indéterminée avec libellé accessible.

Indicateur d’activité indéterminée avec libellé accessible.
Application native de l’exemple ci-dessous.

Essayer le composant

Télécharger le projet complet, le décompresser et lancer cargo run --locked dans son dossier. Rust 1.92+ ; Slint Kit 0.3.0 depuis crates.io. Vous pouvez aussi copier les quatre fichiers ci-dessous.

Arrêtez et relancez l’indicateur de chargement. Un thème à mouvement réduit garde les repères immobiles.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitSpinner, KitButton, KitTheme, KitThemes } from "@kit/kit.slint";
export component App inherits Window {
    title: "KitSpinner example";
    preferred-width: 520px;
    preferred-height: 220px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in property <bool> running: true;
    callback toggle();
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        alignment: start;
        control := KitSpinner { visible: root.running; theme: root.theme; label: "Loading projects"; running: root.running; }
        KitButton { theme: root.theme; text: root.running ? "Stop loading" : "Start loading"; activated => { root.toggle(); } }
        result := Text { text: root.running ? "Loading projects" : "Loading stopped"; color: root.theme.text-primary; }
    }

}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
use slint::ComponentHandle;

mod ui { slint::include_modules!(); }
fn main() -> Result<(), slint::PlatformError> {
    let app = ui::App::new()?;
    slint_kit::init_form_validation!(ui, app);
    let weak = app.as_weak();
    app.on_toggle(move || { if let Some(app) = weak.upgrade() { app.set_running(!app.get_running()); } });
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

[package]
name = "slint-kit-spinner-example"
version = "0.1.0"
edition = "2024"
rust-version = "1.92"
license = "GPL-3.0-or-later"
publish = false

[dependencies]
slint-kit = "=0.3.0"
slint = { version = "=1.18.1", default-features = false, features = ["std", "compat-1-18", "backend-winit", "renderer-skia", "accessibility"] }

[build-dependencies]
slint-kit-build = "=0.3.0"

[workspace]

build.rs

fn main() { slint_kit_build::compile("ui/app.slint").expect("compile component example"); }

Fichiers : Cargo.toml · build.rs · ui/app.slint · src/main.rs

Utilisez-le lorsqu’une opération est en cours sans fraction connue et fournissez un label décrivant cette opération. Pilotez running depuis l’activité réelle.

Les points tournent par variation d’opacité et deviennent statiques en mouvement réduit ou à l’arrêt. Utilisez KitProgress lorsqu’une progression mesurable est disponible.

Voir le code source ↗

Choisir entre une option intégrée et une composition personnalisée

Options partagées

Composition visuelle

Le fichier ci-dessous produit la capture. Pour les composants pilotés par un contrôleur, il montre l’état affiché sans fournir le branchement Rust. Créer un projet.

Afficher le fichier de la capture
Indicateur d’activité indéterminée avec libellé accessible.
Capture native du même exemple, moteur Skia.
// Public label overrides localize this fixture; toolkit/host defaults keep their language.
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitSpinner, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitSpinner — exemple";
    preferred-width: 360px;
    preferred-height: 160px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> status;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Indicateur d’activité"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        HorizontalLayout { alignment: start; spacing: 16px; KitSpinner { theme: root.theme; running: false; label: "Chargement des projets"; } Text { text: "Chargement des projets…"; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; } }
        if root.status != "": Text { text: root.status; color: root.theme.text-secondary; font-size: 12px * root.theme.text-scale; wrap: word-wrap; }
    }
}

Télécharger cet exemple

API publique

Hérite de Rectangle.

Propriétés

Nom Type Sens
theme KitTheme in
label string in
running bool in

Voir aussi