Slint Kit Documentation

Mise en page

Grille pour Slint

KitGrid · Slint Kit 0.3.1

Grille utilisant directement les règles publiques de placement de Slint.

Grille utilisant directement les règles publiques de placement de Slint.
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 Overview, Activity, Members, Settings : 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, KitGrid, KitTheme, KitThemes } from "@kit/kit.slint";

export enum DemoAction { overview, activity, members, settings }

export component App inherits Window {
    title: "KitGrid example";
    preferred-width: 420px;
    preferred-height: 230px;
    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: "Grid"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitGrid { Row { KitButton { theme: root.theme; text: "Overview"; activated => { root.action-requested(DemoAction.overview); } }KitButton { theme: root.theme; text: "Activity"; activated => { root.action-requested(DemoAction.activity); } } } Row { KitButton { theme: root.theme; text: "Members"; activated => { root.action-requested(DemoAction.members); } }KitButton { theme: root.theme; text: "Settings"; activated => { root.action-requested(DemoAction.settings); } } } }
        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::Overview => "Overview",
                DemoAction::Activity => "Activity",
                DemoAction::Members => "Members",
                DemoAction::Settings => "Settings",
            };
            app.set_status(format!("{label} handled by Rust ({next})").into());
        }
    });
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

[package]
name = "slint-kit-grid-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éclarez les Row, colonnes et extensions de cellule au point d’utilisation. Réglez gap et inset pour adopter l’espacement du kit.

Le composant hérite de GridLayout et conserve une hauteur naturelle. Il ne redistribue pas automatiquement des enfants opaques dans des colonnes.

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
Grille utilisant directement les règles publiques de placement de Slint.
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, KitGrid, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitGrid — exemple";
    preferred-width: 420px;
    preferred-height: 230px;
    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: "Grille"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitGrid { Row { KitButton { theme: root.theme; text: "Vue d’ensemble"; activated => { root.status = "Action demandée"; } }KitButton { theme: root.theme; text: "Activité"; activated => { root.status = "Action demandée"; } } } Row { KitButton { theme: root.theme; text: "Membres"; activated => { root.status = "Action demandée"; } }KitButton { theme: root.theme; text: "Réglages"; 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 GridLayout.

Propriétés

Nom Type Sens
gap LayoutSpace in
inset LayoutSpace in

Types et variantes

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

Voir aussi