Slint Kit Documentation

Présentation

État vide pour Slint

KitEmptyState · Slint Kit 0.3.0

Présentation d’une collection vide avec explication et contenu d’action libre.

Présentation d’une collection vide avec explication et contenu d’action libre.
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 Create 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, KitEmptyState, KitTheme, KitThemes } from "@kit/kit.slint";

export enum DemoAction { create-project }

export component App inherits Window {
    title: "KitEmptyState example";
    preferred-width: 480px;
    preferred-height: 310px;
    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: "Empty State"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitEmptyState { theme: root.theme; title: "No projects yet"; description: "Create a project to start collecting your ideas."; KitButton { theme: root.theme; text: "Create project"; activated => { root.action-requested(DemoAction.create-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::CreateProject => "Create project",
            };
            app.set_status(format!("{label} handled by Rust ({next})").into());
        }
    });
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

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

Fournissez title et description pour expliquer la situation, puis ajoutez une action utile comme enfant. Distinguez une absence de résultats d’un chargement ou d’une erreur dans l’état de l’application.

Les textes reviennent à la ligne et le composant mesure sa hauteur depuis le contenu. Il ne décide pas quand une collection est vide.

Voir le code source ↗

Choisir entre une option intégrée et une composition personnalisée

Options partagées

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
Présentation d’une collection vide avec explication et contenu d’action libre.
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, KitEmptyState, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitEmptyState — exemple";
    preferred-width: 480px;
    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: "État vide"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitEmptyState { theme: root.theme; title: "Aucun projet pour le moment"; description: "Créez un projet pour commencer à rassembler vos idées."; KitButton { theme: root.theme; text: "Créer un 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
title string in
description string in

Voir aussi