QML如何结合Qt使用GridView

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

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

先看看QML代码：

//GridView
GridView{
    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，

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