Slint Kit Documentation

Mise en page

Surface pour Slint

KitSurface · Slint Kit 0.3.1

Surface visuelle unique pour un contenu composé.

Surface visuelle unique pour un contenu composé.
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 Save project : Rust traite la commande et actualise le compteur d’actions.

ui/app.slint

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

export enum DemoAction { save-project }

export component App inherits Window {
    title: "KitSurface example";
    preferred-width: 480px;
    preferred-height: 300px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> draft-0: "Field notes";
    in property <string> status: "Choose an action.";
    callback action-requested(DemoAction);
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Surface"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitSurface { theme: root.theme;Text { text: "Team workspace"; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; }KitTextField { theme: root.theme; label: "Project name"; text <=> root.draft-0; }KitButton { theme: root.theme; text: "Save project"; activated => { root.action-requested(DemoAction.save-project); } } }
        Text { text: root.status; color: root.theme.text-secondary; wrap: word-wrap; }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
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_u32);
    let weak = app.as_weak();
    app.on_action_requested(move |action| {
        if let Some(app) = weak.upgrade() {
            let next = count.get().checked_add(1).expect("action count capacity");
            count.set(next);
            let label = match action {
                DemoAction::SaveProject => "Save project",
            };
            app.set_status(format!("{label} handled by Rust ({next})").into());
        }
    });
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

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

Choisissez SurfaceLevel.flat ou .raised, SurfaceBorder.none ou .subtle, puis inset et gap. Placez le contenu dans ses enfants.

Elle possède le fond et le padding, sans intercepter le pointeur ni le focus. Composez une action avec KitPressable lorsqu’une surface doit être interactive.

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
Surface visuelle unique pour un contenu composé.
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, KitSurface, KitTextField, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitSurface — exemple";
    preferred-width: 480px;
    preferred-height: 300px;
    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: "Surface"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitSurface { theme: root.theme;Text { text: "Espace de travail de l’équipe"; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; }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: "Nom du projet"; text: "Notes de terrain"; }KitButton { theme: root.theme; text: "Enregistrer le projet"; 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 Rectangle.

Propriétés

Nom Type Sens
theme KitTheme in
level SurfaceLevel in
border SurfaceBorder in
inset LayoutSpace in
gap LayoutSpace in

Types et variantes

Type Déclaration
enum LayoutSpace none, tight, compact, regular, roomy, section
enum SurfaceBorder none, subtle
enum SurfaceLevel flat, raised

Voir aussi