使用C++实现QML的TreeView Model （一）

使用C++实现QML的TreeView Model （一）

QML中的数据访问组件如ListView、TableView、GridView通常使用ListModel做为数据提供者，这种应用有相当大局限性，如无法访问本地文件系统、无法连接到传统的SQL数据库，所以通常在使用中都是通过C++实现数据访问，通过QML进行数据展示和编辑，常用的数据模型组件有QAbstractItemModel、QAbstractTableModel、QSQLTableModel等。所有的高级Model组件都继承自QAbstractItemModel，只要了解QAbstractItemModel的接口函数和运作机理，就可以了解QT的Model/View机制实现方式。
QAbstractItemModel是一个抽象类，要实例化QAbstractItemModel必须继承并至少实现以下5个方法：

int rowCount(const QModelIndex &parent=QModelIndex()) const;
int columnCount(const QModelIndex &parent=QModelIndex()) const;
QModelIndex index(int row, int column, const QModelIndex &parent=QModelIndex()) const;
QVariant data(const QModelIndex &index, int role=Qt::DisplayRole) const;
QModelIndex parent(const QModelIndex &child) const;
与 QWidget组件不同的是，在QML的数据模型中，并不通过列（Column）进行数据访问，而是通过Role进行数据访问，例如：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>TableView{<br /> </li><li>id:tableView1<br /></li><li>anchors.fill: parent<br /></li><li>TableViewColumn{<br /></li><li>width:50<br /></li><li>title:""<br /></li><li>role:"tagging" </li><li>}<br /></li><li><br /></li><li>TableViewColumn{<br /></li><li>width:80<br /></li><li>title:"操作"<br /></li><li>role:"name" </li><li>} </li><li>} </li></ol>

TableViewColumn是TableView的列定义，TableViewColumn通过role属性定义来向model获取数据，TableView会通过调用model的roleNames()方法来获取model可用的role。所以，除了必须要实现的5个虚函数外，还必须重新实现roleNames()来告诉View有哪些role是可用的，roleNames()的原型如下：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>QHash<int,QByteArray> roleNames() const; </li></ol>

以下是一个完整的Model类定义：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>classSqlMenuEntry:public QAbstractItemModel,public QQmlParserStatus<br /> </li><li>{<br /></li><li>Q_OBJECT<br /></li><li>public:<br /></li><li>explicit SqlMenuEntry(QObject *parent=0);<br /></li><li>~SqlMenuEntry();<br /></li><li>enum MenuEntryRoles{idRole=Qt::UserRole+1,nameRole,defaultEntryRole,customEntryRole,iconRole,iconHoverRole};<br /></li><li>int rowCount(const QModelIndex &parent=QModelIndex()) const;<br /></li><li>int columnCount(const QModelIndex &parent=QModelIndex()) const;<br /></li><li>QModelIndex index(int row, int column, const QModelIndex &parent=QModelIndex()) const;<br /></li><li>QVariant data(const QModelIndex &index, int role=Qt::DisplayRole) const;<br /></li><li>QModelIndex parent(const QModelIndex &child) const;<br /></li><li>QHash<int,QByteArray>roleNames() const;<br /></li><li>private:<br /></li><li>QHash<int,QByteArray> mRoleNames;<br /></li><li> QList<QHash<int,QVariant>> mRecords; //真正的数据保存在这里,QList只能保存二维数据没办法保存树状节点，这里仅仅是例子<br /></li><li>};<br /></li><li><br /></li><li></li></ol>

roleNames()的实现相当简单：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>QHash<int, QByteArray> SqlMenuEntry::roleNames() const<br /> </li><li>{<br /></li><li>return mRoleNames;<br /></li><li>} </li></ol>

mRoleNames可以在类构造函数中进行初始化：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>SqlMenuEntry::SqlMenuEntry(QObject *parent)<br /> </li><li>:QAbstractItemModel(parent)<br /></li><li>{<br /></li><li>mRoleNames[nameRole] = "name";<br /></li><li>mRoleNames[idRole] = "menuid";<br /></li><li>mRoleNames[iconRole] = "icon";<br /></li><li>mRoleNames[defaultEntryRole] = "default";<br /></li><li>mRoleNames[iconHoverRole] = "iconHover";<br /></li><li>} </li></ol>

在QML中就可以通过"name"、"menuid"、"icon"对数据进行访问：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>ListView{<br /> </li><li>model:MenuEntryModel{ }<br /></li><li>delegate:Item{<br /></li><li>Column{<br /></li><li>Text{text:name}<br /></li><li> Text{text:icon}<br /></li><li>}<br /></li><li>}<br /></li><li>} </li></ol>

如果仅为二维表提供数据，那么根据以上几个接口函数的名称就可以简单的实现数据供给View视图，其中：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>int SqlMenuEntry::rowCount(const QModelIndex &parent) const<br /> </li><li>{<br /></li><li> return mRecords.size();</li><li><br /></li><li>} </li><li>int SqlMenuEntry::columnCount(const QModelIndex &parent) const </li><li>{ </li><li> return 1;  //QML不使用列获取数据，默认返回一列，不返回1例的话，View控件会认为表是空表，不获取数据 </li><li>} </li><li>QModelIndex SqlMenuEntry::index(int row, int column, const QModelIndex &parent) const </li><li>{ </li><li>  if((row >= 0)&&(row < mRecords.size())) </li><li>  { </li><li>    return createIndex(row,column); </li><li>  } </li><li>  return QModelIndex();  //返回一个无效的空索引 </li><li>} </li><li>QModelIndex SqlMenuEntry::parent(const QModelIndex &child) const </li><li>{ </li><li>  return QModelIndex(); //二维表中的行没有parent节点 </li><li>} </li><li>QVariant SqlMenuEntry::data(const QModelIndex &index, int role) const </li><li>{ </li><li>  if(index.isValid) </li><li>  { </li><li>   return mRecords[index.row()][role]; </li><li>  } </li><li>} </li></ol>

mRecords中的数据可以按需求生成，如通过QSqlQuery组件从数据库服务器获取，获取添加数据：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li> QHash<int,QVariant> row;<br /> </li><li>row[nameRole] = "name1";<br /></li><li>row[iconRole] = "icon1";<br /></li><li>mRecords.append(row); </li></ol>

实现后的model类可以通过

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li>qmlRegisterType<SqlMenuEntry>("com.limutech.tv",1,0,"MenuEntryModel");</li></ol>

进行注册，注册后的类可以在QML生成实例：

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li> import com.limutech.tv 1.0<br /> </li><li>MenuEntryModel{<br /></li><li>id:menuEntryModel<br /></li><li>}<br /></li><li>ListView{<br /></li><li>model:menuEntryModel<br /></li><li>...<br /></li><li>} </li></ol>

View组件获取数据的流程大概如下：
1、View调用rowCount(constQModelIndex &parent)并传递一个空的parent获取根节点的行数；
2、View调用columnCount(const QModelIndex &parent)并传递一个空的parent获取根节点的列数；
3、View对各行列枚举调用index(int row, int column, const QModelIndex &parent)交传行号、列号和空的parent获取根节点QModelIndex;
4、继续以返回的modelIndex为parent获取每行的rowCount和columnCount，如果大于0则该节点还有子节点；
5、调用roleNames返回可用的role列表
6、以返回的modelIndex和role为参数，调用data获取数据并使用相应的delegate进行显示
所以要显示一个树状列表，需要对二维表模型进行完善，处理parent不为空的情况，同时，模型应该可以存储树状数据，在下一节我将继续分享层次模型的实现方式和涉及数据修改的一些实现。