Case à cocher pour Slint

KitCheckbox · Slint Kit 0.3.1

Case à cocher contrôlée avec un véritable état mixte.

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.

Cochez la case ; Rust conserve le CheckState accepté.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitCheckbox, CheckState, KitTheme, KitThemes } from "@kit/kit.slint";
export component App inherits Window {
    title: "KitCheckbox example";
    preferred-width: 520px;
    preferred-height: 280px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in property <CheckState> choice: CheckState.unchecked;
    callback change(CheckState);
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        alignment: start;
        control := KitCheckbox { theme: root.theme; label: "Send product updates"; state: root.choice; toggled(value) => { root.change(value); } }
        result := Text { text: root.choice == CheckState.checked ? "Subscribed" : "Not subscribed"; 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_change(move |choice| { if let Some(app) = weak.upgrade() { app.set_choice(choice); } });
    app.run()
}

Cargo.toml et build.rs

Cargo.toml

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

Projetez CheckState.unchecked, .checked ou .mixed et acceptez la demande toggled(CheckState) dans le contrôleur. Fournissez label et FieldAccess.

Une activation demande l’état coché sauf depuis .checked, qui demande l’état décoché. L’état mixte reste distinct et la lecture seule permet le focus sans modification.

Voir le code source ↗

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

Options partagées

label — propriété intégrée ; exemple de composition personnalisé

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

// Public label overrides localize this fixture; toolkit/host defaults keep their language.
// SPDX-License-Identifier: GPL-3.0-or-later
import { CheckState, KitCheckbox, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitCheckbox — 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: "Case à cocher"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitCheckbox { theme: root.theme; label: "Recevoir les nouveautés du produit"; state: CheckState.checked; toggled(state) => { root.status = "Changement de case à cocher demandé"; } }
        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
`required`	`bool`	`in`
`required-message`	`string`	`in`
`custom-validity`	`string`	`in-out`
`validity`	`KitValidityState`	`out`
`will-validate`	`bool`	`out`
`validation-message`	`string`	`out`
`state`	`CheckState`	`in`
`access`	`FieldAccess`	`in`
`label`	`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`

Types et variantes

Type	Déclaration
`enum CheckState`	`unchecked, checked, mixed`
`enum FieldAccess`	`editable, read-only, disabled`
`struct KitValidityState`	`valid: bool, value-missing: bool, type-mismatch: bool, pattern-mismatch: bool, too-long: bool, too-short: bool, range-underflow: bool, range-overflow: bool, step-mismatch: bool, bad-input: bool, custom-error: bool,`