Qt Quick TableViews の例 - Pixelator

Pixelator の例では、QMLTableView とデリゲートを使ってカスタムテーブルモデルを作成する方法を示します。

例の実行

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

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

©2024 The Qt Company Ltd. 本書に含まれるドキュメントの著作権は、それぞれの所有者に帰属します。ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。