Mise en page

Ligne adaptative pour Slint

KitWrap · Slint Kit 0.3.1

Disposition qui redistribue ses enfants sur plusieurs lignes.

Lancer l’aperçu

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, Settings, Members, Project 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, KitTheme, KitThemes, KitWrap } from "@kit/kit.slint";

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

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

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

fn main() {
    slint_kit_build::compile("ui/app.slint").expect("compile component example");
}

Fichiers : Cargo.toml · build.rs · ui/app.slint · src/main.rs

Ajoutez des enfants ordinaires comme des badges ou boutons, puis réglez gap et inset. Donnez au parent une largeur finie et assez de hauteur pour les lignes repliées.

Le composant utilise FlexboxLayout avec flex-wrap: wrap. Les instances des enfants restent en place lors du redimensionnement, préservant le focus et l’état des éditeurs.

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

// Public label overrides localize this fixture; toolkit/host defaults keep their language.
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitButton, KitTheme, KitThemes, KitWrap } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitWrap — exemple";
    preferred-width: 420px;
    preferred-height: 220px;
    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: "Disposition avec retour à la ligne"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitWrap { 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"; } }KitButton { theme: root.theme; text: "Réglages"; activated => { root.status = "Action demandée"; } }KitButton { theme: root.theme; text: "Membres"; activated => { root.status = "Action demandée"; } }KitButton { theme: root.theme; text: "Réglages du 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 FlexboxLayout.

Propriétés

Types et variantes

Voir aussi

• Ligne de contenu
• Groupe de boutons