Slint Kit Documentation

Boutons et actions

Bouton pour Slint

KitButton · Slint Kit 0.3.1

Bouton Slint avec libellé, état occupé et callback d’activation.

Bouton Slint avec libellé, état occupé et callback d’activation.
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.

Cliquez sur le bouton : le callback Rust incrémente le compteur affiché.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
import { KitButton, KitThemes } from "@kit/kit.slint";

export component App inherits Window {
    title: "Slint button";
    preferred-width: 420px;
    preferred-height: 220px;
    max-width: 100000px;
    max-height: 100000px;
    background: KitThemes.light.canvas;
    in property <int> count;
    callback increment();
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        alignment: start;
        button := KitButton { text: "Count in Rust"; activated => { root.increment(); } }
        count-label := Text { text: "Rust callback count: " + root.count; color: KitThemes.light.text-primary; }
    }
}

src/main.rs

use slint::ComponentHandle;
use std::cell::Cell;
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    let count = Cell::new(0_i32);
    let weak = app.as_weak();
    app.on_increment(move || {
        if let Some(app) = weak.upgrade() {
            let next = count.get().checked_add(1).expect("counter capacity");
            count.set(next);
            app.set_count(next);
        }
    });
    app.run()
}

Cargo.toml et build.rs

Cargo.toml

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

Définissez text, puis traitez activated pour lancer votre action. Activez busy pendant son exécution ; utilisez control-width: ControlWidth.fill pour remplir une cellule du layout.

Entrée active le bouton à l’appui ; Espace l’active au relâchement. busy et disabled bloquent l’activation. Le libellé conserve sa largeur mesurée sous l’indicateur d’activité et fournit le nom accessible si accessible-name est vide.

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
Bouton Slint avec libellé, état occupé et callback d’activation.
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 { KitButton, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitButton — 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: "Bouton"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitButton { theme: root.theme; text: "Enregistrer les modifications"; activated => { root.status = "Action demandée"; } }
        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 KitPressable.

Propriétés

Nom Type Sens
text string in
Propriétés héritées disponibles
Nom Type Définie sur
theme KitTheme KitPressable
intent ButtonIntent KitPressable
control-size ControlSize KitPressable
control-width ControlWidth KitPressable
recipe ButtonRecipe KitPressable
accessible-name string KitPressable
disabled bool KitPressable
busy bool KitPressable
tab-stop bool KitPressable
hovered bool KitPressable
pressed bool KitPressable
has-focus bool KitPressable
focus-visible bool KitPressable

Voir aussi