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 にデータを供給する必要があります。QString としてQt Property Systemと source プロパティを使用して、画像のパスを設定します。また、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.