Qt Quick TableViews 示例 - Pixelator

Pixelator 示例展示了如何将 QMLTableView 和委托用于自定义表格模型。

运行示例

要运行来自 Qt Creator，打开Welcome 模式，并从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

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

我们只需要一个简单的只读表模型。因此，我们需要实现一些函数来指示图片的尺寸并向TableView 提供数据。我们使用Qt XML 属性系统和一个源属性作为QString 来设置图片的路径。我们还添加了QML_ELEMENT 宏，将模型暴露给 QML。

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

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

在这里，当源路径设置好后，我们就加载图片。当源路径改变时，我们需要调用beginResetModel() 。加载图像后，我们需要调用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();
}

行数和列数分别设置为图片的高度和宽度。

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

通过这个重载函数，我们可以访问图像中的像素数据。当我们以显示角色调用该函数时，将返回像素的灰度值。

Component {
    id: pixelDelegate

    Item {
        required property real display

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

        implicitWidth: size
        implicitHeight: size

TableView 中的每个像素都是通过一个委托组件显示的。它包含一个项目，该项目具有定义表格单元格大小的隐含高度和宽度。它还有一个从模型中获取像素灰度值的属性。

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

在Item 中，有一个圆角Rectangle ，其大小和半径与像素的灰度值有关。

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

为了实现一点交互，我们在Item 内放置了一个MouseArea ，鼠标移过时会改变矩形的颜色。

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

Rectangle 也有一个简短的颜色动画，在改变颜色时在不同颜色之间渐变。

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

    delegate: pixelDelegate
}

TableView 横跨整个窗口，并附加了我们自定义的ImageModel 实例。

示例项目 @ 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.