qml treeview 自定义模型

在 QML 中使用 TreeView 显示树形结构时，需要使用自定义模型。下面是一个简单的例子：

首先，我们需要创建一个继承自 QAbstractItemModel 的自定义模型类，这个类需要实现以下方法：

int rowCount(const QModelIndex &parent = QModelIndex()) const; // 返回指定父节点下的子节点数目
int columnCount(const QModelIndex &parent = QModelIndex()) const; // 返回每个节点的列数
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const; // 返回指定节点的指定角色数据
QModelIndex index(int row, int column, const QModelIndex &parent = QModelIndex()) const; // 返回指定行列下的索引
QModelIndex parent(const QModelIndex &index) const; // 返回指定节点的父节点索引

下面是一个示例模型类的实现：

class MyTreeModel : public QAbstractItemModel
{
    Q_OBJECT

public:
    explicit MyTreeModel(QObject *parent = nullptr);

    // 重写 QAbstractItemModel 的方法
    QModelIndex index(int row, int column, const QModelIndex &parent = QModelIndex()) const override;
    QModelIndex parent(const QModelIndex &child) const override;
    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;

private:
    QList<QStringList> m_data; // 存储树形数据
};

在构造函数中初始化数据：

MyTreeModel::MyTreeModel(QObject *parent)
    : QAbstractItemModel(parent)
{
    QStringList rootData;
    rootData << "Name" << "Description";
    m_data.append(rootData);

    QStringList childData;
    childData << "John" << "A guy";
    rootData.append(childData);
    m_data.append(rootData);

    childData.clear();
    childData << "Bill" << "Another guy";
    rootData.clear();
    rootData << "Another" << "Description";
    rootData.append(childData);
    m_data.append(rootData);
}

接下来，实现重写的 QAbstractItemModel 方法：

QModelIndex MyTreeModel::index(int row, int column, const QModelIndex &parent) const
{
    if (!hasIndex(row, column, parent))
        return QModelIndex();

    if (!parent.isValid())
        return createIndex(row, column, 0);
    
    auto parentData = m_data[parent.row()];
    if (row < parentData.size())
        return createIndex(row, column, &parentData[row]);
    else
        return QModelIndex();
}

QModelIndex MyTreeModel::parent(const QModelIndex &child) const
{
    if (!child.isValid())
        return QModelIndex();

    QString parentData = *static_cast<QString*>(child.internalPointer());
    for (int i = 0; i < m_data.size(); ++i) {
        auto rowData = m_data[i];
        for (int j = 0; j < rowData.size(); ++j) {
            if (rowData[j] == parentData) {
                return createIndex(i, 0, &m_data[i][0]);
            }
        }
    }

    return QModelIndex();
}

int MyTreeModel::rowCount(const QModelIndex &parent) const
{
    if (parent.column() > 0)
        return 0;

    if (!parent.isValid())
        return m_data.size();

    auto parentData = m_data[parent.row()];
    return parentData.size();
}

int MyTreeModel::columnCount(const QModelIndex &parent) const
{
    return 2;
}

QVariant MyTreeModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid())
        return QVariant();

    if (role != Qt::DisplayRole)
        return QVariant();

    auto data = m_data[index.row()][index.column()];
    return QVariant::fromValue(data);
}

最后，在 QML 中使用 TreeView 组件，并使用自定义模型：

import QtQuick.Controls 2.15

TreeView {
    model: MyTreeModel {}

    TableViewColumn {
        role: "Name"
        title: "Name"
        width: 100
    }

    TableViewColumn {
        role: "Description"
        title: "Description"
        width: 200
    }
}

这样就完成了使用自定义模型在 QML 中显示树形结构的操作。