Qt Quick Ejemplos de TableViews - Pixelator

El ejemplo Pixelator muestra cómo se puede utilizar un QML TableView y un delegado para modelos de tabla personalizados.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para obtener más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

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

Sólo necesitamos un modelo de tabla simple y de sólo lectura. Por lo tanto, necesitamos implementar funciones para indicar las dimensiones de la imagen y suministrar datos al TableView. Utilizamos el sistema de propiedades de Qt y una propiedad fuente como QString para establecer la ruta de la imagen. También añadimos la macro QML_ELEMENT para exponer el modelo a QML.

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

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

Aquí cargamos la imagen cuando se establece la ruta de origen. Cuando la ruta de origen ha cambiado, necesitamos llamar antes a beginResetModel(). Después de que la imagen ha sido cargada, necesitamos llamar a 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();
}

El recuento de filas y columnas se establece en la altura y anchura de la imagen, respectivamente.

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

Esta función sobrecargada nos permite acceder a los datos de píxeles de la imagen. Cuando llamamos a esta función con el rol de visualización, devolvemos el valor de gris del píxel.

Component {
    id: pixelDelegate

    Item {
        required property real display

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

        implicitWidth: size
        implicitHeight: size

Cada píxel de TableView se muestra a través de un componente delegado. Contiene un elemento que tiene una altura y una anchura implícitas que definen el tamaño de la celda de la tabla. También tiene una propiedad para el valor de gris del píxel que se recupera del modelo.

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

Dentro del Item, hay un Rectangle redondeado con el tamaño y radio de acuerdo al valor de gris del pixel.

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

Para un poco de interacción, colocamos un MouseArea dentro del Item y cambiamos el color del rectángulo al pasar el ratón por encima.

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

El Rectangle también tiene una breve animación de color para cambiar entre los colores cuando se cambia.

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

    delegate: pixelDelegate
}

El TableView se extiende por toda la ventana y tiene una instancia de nuestro ImageModel personalizado adjunto.

Proyecto de ejemplo @ 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.