IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Qt Quick Discussion :

Une TableView avec Qt Quick


Sujet :

Qt Quick

  1. #1
    Inactif  


    Homme Profil pro
    Inscrit en
    novembre 2008
    Messages
    5 295
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2008
    Messages : 5 295
    Points : 15 633
    Points
    15 633
    Par défaut Une TableView avec Qt Quick
    Si vous avez été amené à utiliser la version Desktop de Qt Quick, il y a des chances que vous ayez rencontré des limitations à ListView. ListView vous donne un moyen commode de représenter une liste simple d'éléments. Mais la plupart des applications ont besoin de plus que ça pour représenter les choses comme des play-lists et des albums. J'ai réalisé que c'était une grande limitation de Qt Quick Components for Desktop, donc je voulais voir comment il serait possible d'ajouter cette fonctionnalité par dessus ListView.

    Le résultat est une TableView. Et elle ressemble à ceci :



    Voici une courte vidéo la montrant en action.



    J'ai aussi fait quelques captures d'écran à partir d'autres plateformes :

    Mac

    Windows

    KDE

    Les utilisateurs réguliers de Mac auront peut-être remarqué que j'ai déplacé les en-têtes de colonne à leurs positions actuelles au dessus de la barre de défilement. Elle est conçue pour fonctionner avec les modèles existants pris en charge par Qt Quick tels que ListModel et XmlListModel. Mais du fait que le modèle à une dimension ListModel n'a pas de notion de colonnes, nous avons besoin de fournir la correspondance entre les colonnes et les propriétés. Ainsi, le modèle de la vue ci-dessus ressemble à ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    ListModel {
        id: dataModel
        ListElement { title:"Image title";  credit:"some author";  source:"http:/..." }
        ListElement { title:"Another title";  credit:"some author";  source:"http:/..." }
    }
    Et pour créer une vue de la table :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    TableView {
        model: dataModel
        TableColumn {
            property: "title"
            caption: "Title"
            width: 120
        }
        TableColumn {
            property: "credit"
            caption: "Credit"
            width: 120
        }
        TableColumn {
            property: "source"
            caption: "Image source"
            width: 200
        }
    }
    Notez que les propriétés sur l'ordre et la largeur des colonnes ne sont utilisées que lors de la configuration initiale de la vue. L'utilisateur est libre de redimensionner ou réarranger les colonnes. A première vue, fournir une seule propriété par colonne pourrait sembler être une limitation. Toutefois, si vous avez besoin de plus d'une propriété par élément, vous pouvez tout simplement utiliser une ListElement imbriquée :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ListElement { firstColumn: ListElement { description: "Bananas"; color: "yellow" } }
    Par défaut, la TableView fournira un délégué complet avec des éléments de texte élidé dans chaque cellule. Toutefois, là où Qt Quick est vraiment brillant, c'est sa facilité à personnaliser les éléments. Actuellement, c'est possible en surchargeant rowDelegate, itemDelegate et headerDelegate. Ainsi, par exemple si vous avez besoin d'un délégué très basique permettant de modifier les élément, vous pouvez faire quelque chose comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    itemDelegate:
        TextInput {
            text: itemValue
            onAccepted: model.setProperty(rowIndex, itemProperty, text)
        }
    Ce n'est pas une solution globale pour tout pour le moment. Les limitations connues comprennent la navigation limitée au clavier et l'absence de sélection multiple. Mis à part cela, tout fonctionne plutôt bien par dessus toute utilisation classique deQt 4.7, donc vous pouvez commencer à jouer avec lui aujourd'hui en clonant ce référentiel : Qt Components

    Cet article est une traduction de Table View with Qt Quick, de Jens Bache-Wiig.

  2. #2
    Membre régulier

    Homme Profil pro
    gerant
    Inscrit en
    mars 2011
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Algérie

    Informations professionnelles :
    Activité : gerant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : mars 2011
    Messages : 42
    Points : 88
    Points
    88
    Par défaut
    Bonsoir, est-il possible de lier TableView du Qt Quick au models du module QtSql ? (QSqlTableModel ou QSqlQueryModel par exemple)

Discussions similaires

  1. Concevoir une interface avec Qt Designer ou Qt Quick ?
    Par maxouche dans le forum Qt Quick
    Réponses: 1
    Dernier message: 18/01/2015, 22h09
  2. Binding d'une TableView éditable avec mon modèle
    Par Freddo75 dans le forum JavaFX
    Réponses: 1
    Dernier message: 26/06/2012, 05h02
  3. Une fonction avec des attributs non obligatoires
    Par YanK dans le forum Langage
    Réponses: 5
    Dernier message: 15/11/2002, 13h39
  4. Désigner une variable avec une variable?
    Par littleman dans le forum Paradox
    Réponses: 4
    Dernier message: 12/08/2002, 11h21
  5. couper une connection avec un serveur corba
    Par pons dans le forum CORBA
    Réponses: 3
    Dernier message: 31/05/2002, 10h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo