Slint Kit Documentation

Présentation

Bulle de conversation pour Slint

KitChatBubble · Slint Kit 0.3.1

Message de conversation avec auteur et métadonnées.

Message de conversation avec auteur et métadonnées.
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.

Lancez l’application pour observer cette composition et redimensionner sa fenêtre.

ui/app.slint

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

export component App inherits Window {
    title: "KitChatBubble example";
    preferred-width: 440px;
    preferred-height: 230px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Chat Bubble"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitChatBubble { theme: root.theme; author: "Alex Morgan"; text: "The new workspace is ready for your feedback."; metadata: "Today, 09:30"; }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    app.run()
}
Cargo.toml et build.rs

Cargo.toml

[package]
name = "slint-kit-chat-bubble-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éfinissez author, text et metadata, puis ChatSide.start ou .end selon l’origine du message. Composez plusieurs bulles dans une liste adaptée à la taille de l’historique.

Le côté final utilise la couleur d’accent et le côté initial un fond secondaire. Les textes reviennent à la ligne ; aucune gestion de conversation ou de réseau n’est intégrée.

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
Message de conversation avec auteur et métadonnées.
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 { KitChatBubble, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitChatBubble — exemple";
    preferred-width: 440px;
    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: "Bulle de conversation"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitChatBubble { theme: root.theme; author: "Alex Morgan"; text: "Le nouvel espace de travail est prêt à recevoir vos commentaires."; metadata: "Aujourd’hui, 09:30"; }
        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 HorizontalLayout.

Propriétés

Nom Type Sens
theme KitTheme in
side ChatSide in
author string in
text string in
metadata string in

Types et variantes

Type Déclaration
enum ChatSide start, end

Voir aussi