Avatar pour Slint

KitAvatar · Slint Kit 0.3.0

Représentation d’une personne ou entité par image ou initiales.

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 { AvatarShape, KitAvatar, KitTheme, KitThemes } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitAvatar example";
    preferred-width: 360px;
    preferred-height: 160px;
    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: "Avatar"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        HorizontalLayout { alignment: start; spacing: 16px; KitAvatar { theme: root.theme; initials: "AM"; accessible-name: "Alex Morgan"; size: 56px; } KitAvatar { theme: root.theme; initials: "JS"; accessible-name: "Jamie Smith"; shape: AvatarShape.rounded; size: 56px; } }
    }
}

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-avatar-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 source, initials de repli et un accessible-name décrivant l’entité. Choisissez AvatarShape.circle, .rounded ou .square et la taille souhaitée.

Une image disponible recouvre la surface ; sinon les initiales sont centrées. La taille minimale suit l’échelle typographique et le contenu est découpé selon la forme.

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

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 { AvatarShape, KitAvatar, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitAvatar — exemple";
    preferred-width: 360px;
    preferred-height: 160px;
    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: "Avatar"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        HorizontalLayout { alignment: start; spacing: 16px; KitAvatar { theme: root.theme; initials: "AM"; accessible-name: "Alex Morgan"; size: 56px; } KitAvatar { theme: root.theme; initials: "JS"; accessible-name: "Jamie Smith"; shape: AvatarShape.rounded; size: 56px; } }
        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`
`source`	`image`	`in`
`initials`	`string`	`in`
`accessible-name`	`string`	`in`
`shape`	`AvatarShape`	`in`
`size`	`length`	`in`

Types et variantes

Type	Déclaration
`enum AvatarShape`	`circle, rounded, square`

Voir aussi

Badge
Carte