Qt Quick Exemples de TableViews - Pixelator

L'exemple Pixelator montre comment un QML TableView et un délégué peuvent être utilisés pour des modèles de table personnalisés.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrir le mode Welcome et sélectionner l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

class ImageModel : public QAbstractTableModel
{
    Q_OBJECT
    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
    QML_ELEMENT
public:
    ImageModel(QObject *parent = nullptr);

    QString source() const;
    void setSource(const QString &source);

    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    int columnCount(const QModelIndex &parent = QModelIndex()) const override;

    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;

    QVariant headerData(int /* section */, Qt::Orientation /* orientation */,
                        int role) const override;

signals:
    void sourceChanged();

private:
    QString m_source;
    QImage m_image;
};

Nous n'avons besoin que d'un modèle de tableau simple, en lecture seule. Nous devons donc mettre en œuvre des fonctions pour indiquer les dimensions de l'image et fournir des données à TableView. Nous utilisons le système de propriétés Qt et une propriété source comme QString pour définir le chemin d'accès de l'image. Nous ajoutons également la macro QML_ELEMENT pour exposer le modèle à QML.

void ImageModel::setSource(const QString &source)
{
    if (m_source == source)
        return;

    beginResetModel();
    m_source = source;
    m_image.load(m_source);
    endResetModel();
}

Ici, nous chargeons l'image lorsque le chemin source est défini. Lorsque le chemin d'accès à la source a changé, nous devons appeler beginResetModel() auparavant. Une fois l'image chargée, nous devons appeler endResetModel().

int ImageModel::rowCount(const QModelIndex &parent) const
{
    if (parent.isValid())
        return 0;
    return m_image.height();
}

int ImageModel::columnCount(const QModelIndex &parent) const
{
    if (parent.isValid())
        return 0;
    return m_image.width();
}

Le nombre de lignes et de colonnes correspond respectivement à la hauteur et à la largeur de l'image.

QVariant ImageModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid() || role != Qt::DisplayRole)
        return QVariant();
    return qGray(m_image.pixel(index.column(), index.row()));
}

Cette fonction surchargée nous permet d'accéder aux données des pixels de l'image. Lorsque nous appelons cette fonction avec le rôle d'affichage, nous renvoyons la valeur de gris du pixel.

Component {
    id: pixelDelegate

    Item {
        required property real display

        readonly property real gray: display / 255.0
        readonly property real size: 16

        implicitWidth: size
        implicitHeight: size

Chaque pixel du site TableView est affiché par l'intermédiaire d'un composant délégué. Il contient un élément dont la hauteur et la largeur implicites définissent la taille des cellules du tableau. Il possède également une propriété pour la valeur de gris du pixel qui est extraite du modèle.

Rectangle {
    id: rect
    anchors.centerIn: parent
    color: "#09102b"
    radius: parent.size - parent.gray * parent.size
    implicitWidth: radius
    implicitHeight: radius

À l'intérieur de Item, il y a un Rectangle arrondi dont la taille et le rayon dépendent de la valeur de gris du pixel.

MouseArea {
    anchors.fill: parent
    hoverEnabled: true
    onEntered: rect.color = "#cecfd5"
    onExited: colorAnimation.start()
}

Pour un peu d'interaction, nous plaçons un MouseArea à l'intérieur du Item et changeons la couleur du rectangle au passage de la souris.

ColorAnimation on color {
    id: colorAnimation
    running: false
    to: "#41cd52"
    duration: 1500
}

Le Rectangle a également une courte animation de couleur pour passer d'une couleur à l'autre lorsqu'il est modifié.

TableView {
    id: tableView
    anchors.fill: parent
    model: ImageModel {
        source: ":/qt.png"
    }

    delegate: pixelDelegate
}

Le TableView s'étend sur toute la fenêtre et contient une instance de notre ImageModel personnalisé.

Exemple de projet @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.