Back to Qt.io
Contact Us Blog Download Qt
本页内容

Qt Quick TableViews 示例 - Pixelator

Pixelator 示例演示了如何使用 QML 中的 `TableView ` 和委托来实现自定义表格模型。

使用 TableView 将 Qt 徽标显示为点阵图案，其中点的大小基于像素灰度值

运行示例

您可以通过以下方式运行该示例：

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 属性系统和一个源属性 `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()));
}

此重载函数允许我们访问图像中的像素数据。当我们使用“display”角色调用此函数时，将返回像素的灰度值。

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

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