Qt Quick Exemples de TableViews - Pixelator

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler 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 table simple et en lecture seule. Nous devons donc implémenter 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 telle que ` QString ` pour définir le chemin d’accès à l’image. Nous ajoutons également la macro ` QML_ELEMENT ` pour exposer le modèle au 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 d’accès source est défini. Lorsque le chemin d’accès source a changé, nous devons d’abord appeler ` beginResetModel() `. 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 est défini respectivement sur 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 de pixels de l’image. Lorsque nous appelons cette fonction avec le rôle « display », 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 de l’ TableView est affiché via un composant délégué. Celui-ci contient un élément doté d’une hauteur et d’une largeur implicites définissant la taille des cellules du tableau. Il dispose également d’une propriété correspondant à la valeur de gris du pixel récupérée depuis le 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 l’ Item, se trouve 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 ajouter une touche d’interactivité, nous plaçons un « MouseArea » à l’intérieur de l’ Item et modifions la couleur de ce dernier au survol de la souris.

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

L'Rectangle comporte également une courte animation de couleur permettant un fondu entre les couleurs lors du changement.

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

    delegate: pixelDelegate
}

L’ TableView s’étend sur toute la fenêtre et comporte une instance de notre ImageModel personnalisée.

Exemple de projet sur code.qt.io