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에 노출하기 위해 QML_ELEMENT 매크로를 추가합니다.

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 을 배치하고 마우스가 오버될 때 Rectangle의 색상을 변경합니다.

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.