Slint Kit Documentation

Présentation

Carte pour Slint

KitCard · Slint Kit 0.3.0

Surface de carte pour regrouper une unité de contenu.

Surface de carte pour regrouper une unité de contenu.
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 Open 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, KitCard, KitCardBody, KitCardFooter, KitCardHeader, KitTheme, KitThemes } from "@kit/kit.slint";

export enum DemoAction { open-project }

export component App inherits Window {
    title: "KitCard 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 property <string> status: "Choose an action.";
    callback action-requested(DemoAction);
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Card"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitCard { theme: root.theme; KitCardHeader { theme: root.theme; title: "Field notes"; description: "Your team’s shared research workspace."; } KitCardBody { Text { text: "Keep observations and decisions together."; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; } } KitCardFooter { KitButton { theme: root.theme; text: "Open project"; activated => { root.action-requested(DemoAction.open-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::OpenProject => "Open project",
            };
            app.set_status(format!("{label} handled by Rust ({next})").into());
        }
    });
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

[package]
name = "slint-kit-card-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 KitCardHeader, KitCardBody et KitCardFooter comme enfants. Réglez inset et gap avec LayoutSpace plutôt que d’ajouter un second padding.

La carte possède une bordure, un fond et une hauteur mesurée à partir du contenu. Elle ne capture pas les clics et ne devient pas une action implicitement.

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 de carte pour regrouper une unité de contenu.
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, KitCard, KitCardBody, KitCardFooter, KitCardHeader, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitCard — 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: "Carte"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitCard { theme: root.theme; KitCardHeader { theme: root.theme; title: "Notes de terrain"; description: "L’espace de recherche partagé de votre équipe."; } KitCardBody { Text { text: "Gardez les observations et les décisions au même endroit."; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; } } KitCardFooter { KitButton { theme: root.theme; text: "Ouvrir 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
inset LayoutSpace in
gap LayoutSpace in

Types et variantes

Type Déclaration
enum LayoutSpace none, tight, compact, regular, roomy, section

Voir aussi