Slint Kit Documentation

Présentation

Pied de page pour Slint

KitFooter · Slint Kit 0.3.0

Région de pied de page pour les informations secondaires d’une application.

Région de pied de page pour les informations secondaires d’une application.
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 Documentation, Contact : 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, KitFooter, KitInline, KitTheme, KitThemes } from "@kit/kit.slint";

export enum DemoAction { documentation, contact }

export component App inherits Window {
    title: "KitFooter example";
    preferred-width: 480px;
    preferred-height: 240px;
    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: "Footer"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitFooter { theme: root.theme; Text { text: "Slint Kit · Native applications, thoughtfully composed."; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; }KitInline { KitButton { theme: root.theme; text: "Documentation"; activated => { root.action-requested(DemoAction.documentation); } }KitButton { theme: root.theme; text: "Contact"; activated => { root.action-requested(DemoAction.contact); } } } }
        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::Documentation => "Documentation",
                DemoAction::Contact => "Contact",
            };
            app.set_status(format!("{label} handled by Rust ({next})").into());
        }
    });
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

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

Placez mentions, liens ou actions secondaires comme enfants. Composez-la en dernier dans KitAppShell et fournissez le même thème.

Le composant expose le rôle accessible content-info et utilise le fond canvas. Sa colonne possède une marge verticale interne et s’adapte à son contenu.

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
Région de pied de page pour les informations secondaires d’une application.
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, KitFooter, KitInline, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitFooter — exemple";
    preferred-width: 480px;
    preferred-height: 240px;
    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: "Pied de page"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitFooter { theme: root.theme; Text { text: "Slint Kit · Des applications natives composées avec soin."; color: root.theme.text-primary; font-size: 14px * root.theme.text-scale; wrap: word-wrap; }KitInline { KitButton { theme: root.theme; text: "Documentation"; activated => { root.status = "Action demandée"; } }KitButton { theme: root.theme; text: "Contact"; 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

Voir aussi