Slint Kit Documentation

Structure des formulaires

Groupe avec légende pour Slint

KitFieldSet · Slint Kit 0.3.1

Groupe de formulaire nommé par une légende visible et accessible.

Groupe de formulaire nommé par une légende visible et 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.

Lancez l’application pour observer cette composition et redimensionner sa fenêtre.

ui/app.slint

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

export component App inherits Window {
    title: "KitFieldSet example";
    preferred-width: 440px;
    preferred-height: 310px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> draft-0: "Montréal";
    in-out property <string> draft-1: "H2Y 1C6";
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Field Set"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitFieldSet { theme: root.theme; legend: "Shipping address"; KitTextField { theme: root.theme; label: "City"; text <=> root.draft-0; } KitTextField { theme: root.theme; label: "Postal code"; text <=> root.draft-1; } }
    }
}

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-set-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 legend et ajoutez les champs apparentés comme enfants. Utilisez-le pour une adresse, un ensemble de préférences ou une section métier cohérente.

La légende alimente le nom du rôle accessible groupbox. Les enfants restent dans une colonne avec l’espacement des champs.

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
Groupe de formulaire nommé par une légende visible et 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 { KitFieldSet, KitTextField, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitFieldSet — exemple";
    preferred-width: 440px;
    preferred-height: 310px;
    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: "Ensemble de champs"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitFieldSet { theme: root.theme; legend: "Adresse de livraison"; 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; label: "Ville"; text: "Montréal"; } 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; label: "Code postal"; text: "H2Y 1C6"; } }
        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
legend string in

Voir aussi