Qt Quick Beispiele für TableViews – Pixelator

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den „ Welcome “-Modus und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

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 lediglich ein einfaches, schreibgeschütztes Tabellenmodell. Daher müssen wir Funktionen implementieren, um die Abmessungen des Bildes anzugeben und Daten an ` TableView` zu übergeben. Wir verwenden das Qt-Eigenschaftssystem und eine Quell-Eigenschaft als ` QString `, um den Pfad des Bildes festzulegen. Außerdem fügen wir das Makro ` QML_ELEMENT ` hinzu, um das Modell für QML verfügbar zu machen.

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, sobald der Quellpfad festgelegt ist. Hat sich der Quellpfad geändert, müssen wir zuvor „ 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 Anzahl der Zeilen und Spalten wird auf die Höhe bzw. Breite des Bildes 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 der ` TableView ` wird über eine Delegate-Komponente angezeigt. Diese enthält ein Element mit impliziter Höhe und Breite, die die Zellengröße der Tabelle definieren. Außerdem verfügt sie über 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 des „ Item “ befindet sich ein abgerundetes „ Rectangle “ mit einer Größe und einem Radius, die sich nach dem Grauwert des Pixels richten.

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

Um ein wenig Interaktion zu schaffen, platzieren wir ein „ MouseArea “ innerhalb des „ Item “ und ändern die Farbe des Rechtecks beim Überfahren mit der Maus.

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

Das „ Rectangle “ verfügt außerdem über eine kurze Farbanimation, die beim Farbwechsel für einen sanften Übergang sorgt.

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

    delegate: pixelDelegate
}

Das „ TableView “ erstreckt sich über das gesamte Fenster und verfügt über eine Instanz unseres benutzerdefinierten „ ImageModel “.

Beispielprojekt @ code.qt.io