QML如何结合Qt使用GridView

使用QML中的GridView来展示数据。

-该示例中我使用GridView来大致描述如何实现一个表情框（类似于QQ聊他的表情框）

先看看QML代码：

//GridViewGridView{    id: touchPad    property int spacing: 5    objectName: "touchPadModel"    anchors.fill: parent    model: touchPadModel //objectlist model    delegate: touchPadDelegate    cellWidth: 45    cellHeight: 45    width: 300    height: 150    contentWidth: 0    contentHeight:0    //Delegate    Component {        id: touchPadDelegate        Rectangle {            clip: true            width: {touchPad.cellWidth - touchPad.spacing}            height: {touchPad.cellHeight - touchPad.spacing}            color: Qt.rgba(0.5+(48 - index)*Math.random()/48,                           0.3+index*Math.random()/48,                           0.3*Math.random(),                           1.0)            Text {                text: modelData.code                color: "white"                font.pixelSize: 18                anchors.centerIn: parent            }        }    }/*Delegate*/}/*GridView*/

对于代码中的model字段和delegate字段我需要说明一下：

-model字段就是为GridView提供数据的对象，它可以是QObjectList、QAbstractItemModel和它的派生类的指针，

还可以是Jason对象等等。（我这里是使用QObjectList来当做GridView的model的）

-delegate字段就是用来显示model的具体的数据的，比如你的model如果是一个QObjectList，

那么deletegate就是用于显示具体的某一个QObject的数据的。

当前代码段中的delegate是用Text来显示QObject中的“code”属性， 其中modelData就是这个QObject

（QML会自动将modelData对应为delegate所代理的对象，其他类似的字段还有index——表示当前代理对象在model中的坐标，等等）

GridView好了，那么接下来该定制我们的model了。

看代码.h：

class TouchPadCell : public QObject{    Q_OBJECT    Q_PROPERTY(QString icon READ icon WRITE setIcon NOTIFY iconChanged)    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)    Q_PROPERTY(QString code READ code WRITE setCode NOTIFY codeChanged)    Q_PROPERTY(QString exdata READ exdata WRITE setExdata NOTIFY exdataChanged)private:    QString mIcon;    QString mText;    QString mCode;    QString mExdata;public:    explicit TouchPadCell(QObject *parent = 0);    TouchPadCell(const QString &icon,                    const QString &text,                    const QString &code,                    const QString &exdata = "",                    QObject* parent = 0);    QString icon() const;    void setIcon(const QString &icon);    QString text() const;    void setText(const QString &text);    QString code() const;    void setCode(const QString &code);    QString exdata() const;    void setExdata(const QString &exdata);signals:    void iconChanged();    void textChanged();    void codeChanged();    void exdataChanged();public slots:};

代码.cpp

#include "TouchPadCell.h"TouchPadCell::TouchPadCell(QObject *parent) : QObject(parent){}TouchPadCell::TouchPadCell(const QString &icon,                                 const QString &text,                                 const QString &code,                                 const QString &exdata,                                 QObject *parent)    :mIcon(icon),     mText(text),     mCode(code),     mExdata(exdata),     QObject(parent){}QString EO_TouchPadCell::icon() const{    return mIcon;}void EO_TouchPadCell::setIcon(const QString &icon){    if(mIcon != icon){        mIcon = icon;        emit iconChanged();    }}QString EO_TouchPadCell::text() const{    return mText;}void EO_TouchPadCell::setText(const QString &text){    if(mText != text){        mText = text;        emit textChanged();    }}QString EO_TouchPadCell::code() const{    return mCode;}void EO_TouchPadCell::setCode(const QString &code){    if(mCode != code){        mCode = code;        emit codeChanged();    }}QString EO_TouchPadCell::exdata() const{    return mExdata;}void EO_TouchPadCell::setExdata(const QString &exdata){    if(mExdata != exdata){        mExdata = exdata;        emit exdataChanged();    }}

我使用QObject作为基类实现了数据类型TouchPadCell，作为一个具体的表情数据，其中有字段icon图标路径、

text文字、code编码、exdata扩展数据

现在我们就创建N个图标，放入QObjectList：

 QList<QObject*> touchPadModel;    for(int i = 0; i < 50; i++){        touchPadModel << new TouchPadCell("url" + QString::number(i), "btn0" + QString::number(i), "/cry0" + QString::number(i));    }

我们创建了50个TouchPadCell数据对象，并放入了touchPadModel之中。

QQuickView view;view.rootContext()->setContextProperty("touchPadModel", QVariant::fromValue(touchPadModel));view.setSource(QUrl::fromLocalFile("D:/QtProject/padView/TouchPad.qml"));    view.show();

上面的代码先是在View的contex中把touchPadModel作为了touchPadModel属性设置了进去，

然后在加载QUrl::fromLocalFile(D:/QtProject/padView/TouchPad.qml ）也就是一开始的qml文件

这个时候GridView中的touchPadModel就会对应为程序中的QObjectList —— touchPadModel。

然后我们就得到了程序：

可以任意调整大小，GridView会自动布局。

我们只需要把Delegate之中的Rectangle换成Image，然后把Image.source的值赋值成modelData.icon，

这就会变成表情框啦！（留着各位去试试咯）