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自定数据类型