Champ composé pour Slint

KitField · Slint Kit 0.3.1

Colonne élémentaire associant le libellé, l’éditeur et ses messages.

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 libellé, puis saisissez du texte dans le champ natif qui reçoit le focus.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitField, KitFieldDescription, KitFieldLabel, KitTextField, KitTheme, KitThemes } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitField example";
    preferred-width: 420px;
    preferred-height: 220px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> draft-0: "Alex Morgan";
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Field"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitField { KitFieldLabel { theme: root.theme; text: "Display name";  focus-requested => { editor.take-focus(); } } editor := KitTextField { theme: root.theme; text <=> root.draft-0; } KitFieldDescription { theme: root.theme; text: "Visible to your team."; } }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    app.run()
}

Cargo.toml et build.rs

Cargo.toml

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

Composez KitFieldLabel, un contrôle et KitFieldDescription ou KitFieldError dans cet ordre. Utilisez KitFieldGroup entre plusieurs champs.

Le composant applique l’espacement d’aide du kit et garde sa hauteur naturelle. Il ne possède ni valeur ni état de validation.

Voir le code source ↗

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 { KitField, KitFieldDescription, KitFieldLabel, KitTextField, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitField — exemple";
    preferred-width: 420px;
    preferred-height: 220px;
    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: "Champ"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitField { KitFieldLabel { theme: root.theme; text: "Nom affiché"; } KitTextField { character-count-label: "caractères"; checking-label: "Vérification…"; clear-label: "Effacer la recherche"; hide-label: "Masquer le mot de passe"; reveal-label: "Afficher le mot de passe"; theme: root.theme; text: "Alex Morgan"; } KitFieldDescription { theme: root.theme; text: "Visible par votre équipe."; } }
        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 VerticalLayout.