QtQuick-TreeView使用自定義模型裏的數據

######我們在使用Qml的TreeView時，默認節點的數據是不能修改，即如果我們使用代理來自定義節點時，使用的styleData.value 默認是string，很多時候我們需要向代理傳遞更多的數據，這時候我們就需要一個自定義數據結構，然後在QStandardItem將數據結構“嵌”進去。

• 首先我們先定義個數據結構，使用type和size兩個屬性

class CustomType : public QObject
{
    Q_OBJECT

    Q_PROPERTY(QString type READ type WRITE setType NOTIFY typeChanged)
    Q_PROPERTY(QString size READ size WRITE setSize NOTIFY sizeChanged)
public:
    explicit CustomType(QObject *parent = nullptr);
    CustomType(const CustomType &other);
    ~CustomType();

    QString type();
    void setType(QString type);

    QString size();
    void setSize(QString size);
signals:
    void typeChanged();
    void sizeChanged();

private:

    QString m_type;
    QString m_size;
};

CustomType::CustomType(QObject *parent) : QObject(parent)
{
}

CustomType::CustomType(const CustomType &other)
{
    m_type = other.m_type;
    m_size = other.m_size;
}

CustomType::~CustomType()
{
}

QString CustomType::type()
{
    return m_type;
}

void CustomType::setType(QString type)
{
    m_type = type;
    emit typeChanged();
}


QString CustomType::size()
{
    return m_size;
}

void CustomType::setSize(QString size)
{
    m_size = size;
    emit sizeChanged();
}

• 2. 接着我們C++使用QStandardItem和QStandardItemModel來定義模型AnimalModel，

class AnimalModel : public QStandardItemModel
{
    Q_OBJECT
public:
    enum AnimalRoles {
        TypeRole = Qt::UserRole + 1
    };

    AnimalModel(QObject *parent = 0);

    void addAnimal(const QString &type, const QString &size);

    QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const;

    QVariant newCustomType(const QString &type, const QString& size);

protected:
    QHash<int, QByteArray> roleNames() const;
};

AnimalModel::AnimalModel(QObject *parent)
    : QStandardItemModel(parent)
{

}

void AnimalModel::addAnimal(const QString &type, const QString &size)
{
    QStandardItem* entry = new QStandardItem();
    entry->setData(newCustomType(type, size), TypeRole);

    auto childEntry = new QStandardItem();
    childEntry->setData(newCustomType(size, type), TypeRole);
    entry->appendRow(childEntry);

    appendRow( entry );
}

QVariant AnimalModel::data(const QModelIndex & index, int role) const {
    QStandardItem *myitem = itemFromIndex(index);

    if (role == TypeRole)
        return myitem->data(TypeRole);

    return QVariant();
}

QVariant AnimalModel::newCustomType(const QString &type, const QString &size)
{
    CustomType *t = new CustomType(this);
    t->setType(type);
    t->setSize(size);
    QVariant v;
    v.setValue(t);
    return v;
}

QHash<int, QByteArray> AnimalModel::roleNames() const {
    QHash<int, QByteArray> roles;
    roles[TypeRole] = "type";
    return roles;
}

• 注意新建數據addAnimal()時我們將CustomType數據結構傳遞進去

setData(newCustomType(type, size), TypeRole);

• 在qml裏使用自定義數據，此時我們不再使用styleData.value，而是styleData.value.type和styleData.value.size，當然也可以在CustomType傳遞int，bool等qml支持的數據類型
  qml文件如下：

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQml.Models 2.13
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.13

import haisong 1.0

Window {
    id: mainWindow
    visible: true
    x: 50; y: 50
    minimumWidth: 800
    minimumHeight: 600

    Rectangle {
        id: leftView
        anchors.fill: parent
        color: "white"
        TreeView {
            id: treeView
            anchors.fill: parent
            headerVisible: false
            backgroundVisible: false
            frameVisible: false
            model: myModel
            rowDelegate: Rectangle {
                height: 30
                color: "#303030"
            }

            itemDelegate: Rectangle {
                       color: "#454545"
                       height: 30
                       Text {
                           id: contentTex
                           x: 25
                           color: "white"
                           anchors.verticalCenter: parent.verticalCenter
                           text: styleData.value.type + ": " + styleData.value.size
                       }
            }

            TableViewColumn {
                role: "type"
                title: "Type"
            }
        }
    }
}

• 注意在main函數將CustomType傳遞到qml裏

    qmlRegisterType<CustomType>(
        "haisong", 1, 0, "CustomType");

• 程序運行截圖如下
  

下載地址：
qml-TreeView自定數據類型