QML之ListView基本使用

以下实现在qml中显示listview，数据由c++提供，切qml可以修改list某项的值。

关键需要实现3个函数：

int rowCount(const QModelIndex &parent) const;

QVariant data(const QModelIndex &index, int role) const;

QHash<int, QByteArray> roleNames() const;

main.cpp

#include <QApplication>
#include "qtquick1applicationviewer.h"
#include <qdeclarativecontext.h>
#include "medialistmodel.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QtQuick1ApplicationViewer viewer;
    viewer.addImportPath(QLatin1String("modules"));
    viewer.setOrientation(QtQuick1ApplicationViewer::ScreenOrientationAuto);
    MediaListModel* pMedialist = new MediaListModel();
    viewer.rootContext()->setContextProperty("myListModel", pMedialist);

    viewer.setMainQmlFile(QLatin1String("qml/listview/main.qml"));
    viewer.showExpanded();

    return app.exec();
}

main.qml

import QtQuick 1.1

Rectangle {
    width: 800
    height: 480

    Component {
        id: listDelegate;

        Text {
            id: listname;
            x:0
            width: 400;
            height: 32;
            font.pointSize: 15;
            verticalAlignment: Text.AlignVCenter;
            horizontalAlignment: Text.AlignHCenter;
            text: name;
            color: ListView.view.currentIndex == index ? "red" : "blue";
            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    console.log("click index ", index)
                }
            }
        }

    }

    ListView {
        id: dynamicList;
        width: 800
        height: 300
        anchors.margins: 10;

        delegate: listDelegate;
        model: myListModel;

        onFlickStarted: {

        }

        onFlickEnded: {

        }
    }

    Rectangle{
        x:30
        y:360
        width: 100
        height: 50
        color: "blue"

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                myListModel.changeName(1)
            }
        }
    }

    Rectangle{
        x:230
        y:360
        width: 100
        height: 50
        color: "red"

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                myListModel.changeName(2)
            }
        }
    }

}

medialistmodel.h

#ifndef MEDIALISTMODEL_H
#define MEDIALISTMODEL_H

#include <QAbstractListModel>
#include <QList>
#include <QString>
#include <QHash>
#include <QByteArray>

class Element{
public:

    Element(QString name_, int id_, int age_){
        name = name_;
        id = id_;
        age = age_;
    }

    QString name;
    int id;
    int age;
};

class MediaListModel : public QAbstractListModel
{
    Q_OBJECT
public:
    enum LineInfo_Roles{
        RoleId =Qt::UserRole + 1,
        RoleName,
        RoleAge
    };
public:
    explicit MediaListModel(QObject *parent = 0);

    int rowCount(const QModelIndex &parent) const;
    QVariant data(const QModelIndex &index, int role) const;
    QHash<int, QByteArray> roleNames() const;

    Q_INVOKABLE void changeName(int index);

signals:

public slots:

private:
    QList<Element> m_display_list;
    QHash<int, QByteArray> m_roleNames;
};

#endif // MEDIALISTMODEL_H

medialistmodel.cpp

#include "medialistmodel.h"

MediaListModel::MediaListModel(QObject *parent) :
    QAbstractListModel(parent)
{
    m_display_list.clear();
    m_roleNames.insert(RoleId, "id");
    m_roleNames.insert(RoleName, "name");
    m_roleNames.insert(RoleAge, "age");

    m_display_list.push_back(Element("wang", 1, 20));
    m_display_list.push_back(Element("liu", 2, 20));
    m_display_list.push_back(Element("zhang", 3, 20));
    m_display_list.push_back(Element("weo", 4, 20));
    m_display_list.push_back(Element("say", 5, 20));
    m_display_list.push_back(Element("bye", 6, 20));
    m_display_list.push_back(Element("why", 7, 20));

}


int MediaListModel::rowCount(const QModelIndex &parent) const
{
    return m_display_list.size();
}

QVariant MediaListModel::data(const QModelIndex &index, int role) const
{
    Element ele = m_display_list.at(index.row());
    QVariant var;
    switch (role) {
    case RoleId:
        var = ele.id;
        break;
    case RoleName:
        var = ele.name;
        break;
    case RoleAge:
        var = ele.age;
        break;
    default:
        break;
    }

    return var;
}

QHash<int, QByteArray> MediaListModel::roleNames() const
{
    return m_roleNames;
}

void MediaListModel::changeName(int index)
{
    if(index == 1){
        Element ele1("change1", 1, 2);
        m_display_list[index] = ele1;
    }

    if(index == 2){
        Element ele2("change2", 2, 3);
        m_display_list[index] = ele2;
    }

    emit dataChanged(createIndex(index,0), createIndex(index,0));
}