Qt Quick TableViews 示例 - Pixelator

Pixelator 示例展示了如何使用 QML TableView 和代理来实现自定义表格模型。

运行示例

要从 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 属性系统和一个源属性作为 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