Slint Kit Documentation

Retour et progression

Progression circulaire pour Slint

KitRadialProgress · Slint Kit 0.3.0

Indicateur circulaire de progression avec pourcentage central.

Indicateur circulaire de progression avec pourcentage central.
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.

Avancez l’envoi par pas de 25 % ; Rust publie une progression bornée.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitRadialProgress, KitButton, KitTheme, KitThemes } from "@kit/kit.slint";
export component App inherits Window {
    title: "KitRadialProgress example";
    preferred-width: 520px;
    preferred-height: 300px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in property <int> percent;
    callback advance();
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        alignment: start;
        control := KitRadialProgress { theme: root.theme; label: "Upload"; value: root.percent / 100; }
        KitButton { theme: root.theme; text: "Advance upload"; activated => { root.advance(); } }
        result := Text { text: root.percent + "% uploaded"; 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_advance(move || { if let Some(app) = weak.upgrade() { app.set_percent((app.get_percent() + 25).min(100)); } });
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

[package]
name = "slint-kit-radial-progress-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

Fournissez value entre 0 et 1 et un label décrivant la tâche suivie. Utilisez-le lorsque la présentation circulaire convient mieux qu’une barre.

Comme KitProgress, il expose bounded-value et un rôle de progression de 0 à 100. Le pourcentage affiché est une projection arrondie de l’état fourni.

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 circulaire de progression avec pourcentage central.
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 { KitRadialProgress, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitRadialProgress — exemple";
    preferred-width: 320px;
    preferred-height: 230px;
    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: "Progression circulaire"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitRadialProgress { theme: root.theme; label: "Progression du téléversement"; value: 0.72; }
        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
value float in
label string in
bounded-value float out

Voir aussi