Qt Quick TableViews Beispiele - Pixelator

Das Pixelator-Beispiel zeigt, wie ein QML TableView und ein Delegate für benutzerdefinierte Tabellenmodelle verwendet werden können.

Ausführen des Beispiels

Um das Beispiel auszuführen Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

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;
};

Wir benötigen nur ein einfaches, schreibgeschütztes Tabellenmodell. Daher müssen wir Funktionen implementieren, um die Abmessungen des Bildes anzugeben und Daten an TableView zu liefern. Wir verwenden das Qt Property System und eine Quelleigenschaft wie QString, um den Pfad des Bildes festzulegen. Wir fügen auch das QML_ELEMENT Makro hinzu, um das Modell für QML freizugeben.

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

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

Hier laden wir das Bild, wenn der Quellpfad festgelegt ist. Wenn sich der Quellpfad geändert hat, müssen wir vorher beginResetModel() aufrufen. Nachdem das Bild geladen wurde, müssen wir endResetModel() aufrufen.

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();
}

Die Zeilen- und Spaltenanzahl wird auf die Bildhöhe bzw. -breite gesetzt.

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()));
}

Diese überladene Funktion ermöglicht uns den Zugriff auf die Pixeldaten des Bildes. Wenn wir diese Funktion mit der Rolle display aufrufen, geben wir den Grauwert des Pixels zurück.

Component {
    id: pixelDelegate

    Item {
        required property real display

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

        implicitWidth: size
        implicitHeight: size

Jedes Pixel in TableView wird über eine delegierte Komponente angezeigt. Sie enthält ein Element, das eine implizite Höhe und Breite hat, die die Zellengröße der Tabelle definieren. Es enthält auch eine Eigenschaft für den Grauwert des Pixels, der aus dem Modell abgerufen wird.

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

Innerhalb von Item befindet sich eine abgerundete Rectangle mit der Größe und dem Radius entsprechend dem Grauwert des Pixels.

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

Um ein wenig Interaktion zu ermöglichen, platzieren wir ein MouseArea innerhalb des Item und ändern die Farbe des Rechtecks, wenn man mit der Maus darüber fährt.

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

Das Rectangle hat auch eine kurze Farbanimation, um zwischen den Farben zu wechseln, wenn es geändert wird.

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

    delegate: pixelDelegate
}

Das TableView erstreckt sich über das gesamte Fenster und hat eine Instanz unseres benutzerdefinierten ImageModel angehängt.

Beispielprojekt @ code.qt.io

© 2025 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.