Портирование моделей данных из Qt в QML, Вариант 2

Портирование моделей данных из Qt в QML, Вариант 2

(релиз Qt SDK на момент написания данной статьи - 1.2.0)

Соединение QT и QML через сигналы и слоты в некотором роде удобно, но далеко не всегда. В этой статье я расскажу как можно модель, созданную в Qt, подключить к QML, и при необходимости менять из Qt.



Предположим что мы работаем с уже созданным нами проектом, описанным в данной статье http://easy-qt.blogspot.com/2012/02/qabstractlistmodel.html

Первым делом нам необходимо сообщить о "наличии" такой модели в QML. Я приведу пример всего файла main.cpp, а место подключения модели закомментирую дополнительно.

#include <QtGui/QApplication>
#include <QDeclarativeContext>
#include <contact.h>
#include <phonemodel.h>
#include "qmlapplicationviewer.h"
Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));
    QmlApplicationViewer viewer;
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer.setMainQmlFile(QLatin1String("qml/PhoneBok/main.qml"));
    viewer.showExpanded();
    PhoneModel model;  // создаём один объект нашей модели
    model.addContact(Contact("Mr. User 1","123-45-67",24)); // добавляем первый контакт
    model.addContact(Contact("Ms. User 2","890-12-34",58)); // добавляем второй контакт
    QDeclarativeContext *ctxt = viewer.rootContext(); // получаем контекст QML
    ctxt->setContextProperty("myModel", &model); // и передаём в него нашу модель с именем myModel
    return app->exec();
}

В общих чертах это всё. Но для большей подробности я опишу простой пример делегата и подключу эту модель, чтоб уж точно вопросов не осталось.

import QtQuick 1.1
Rectangle {
    id: mainRec
    width: 360
    height: 360
    Component
    {
        id: contactDelegate
        Rectangle
        {
            id: delRec
            height: 50
            width: mainRec.width // ширина делегата равна ширине mainRec
            border.width: 2 // толщина "ободка" для объекта
            border.color: "black" // цвет грани одного делегата
            Text
            {
                anchors.topMargin: 3
                anchors.fill: parent // поле текста занимает весь родительский прямоугольник
                text: "Contact " + name + "  Phone: " + phone // тут мы задаём текст, с переменными из модели
            }
            Rectangle
            {
                // этот прямоугольник отображает возрастную шкалу
                height: 12
                color: "lightblue" // цвет прямоугольника, задающего возраст на возрастной шкале
                anchors.left: parent.left // привязываем левую грань к родительскому прямоугольнику
                anchors.leftMargin: mainRec.width * 0.05 // задаём отступ от левой привязки
                width: (mainRec.width * 0.9) * age / 100 // здесь простая формула задаёт длину шкалы
                // будем считать максимальный возраст - 100 лет
                anchors.bottom: parent.bottom // привязываем нижнюю сторону прямоугольника
                anchors.bottomMargin: 5 // отступ для нижней привязки
                radius: 3
                Text
                {
                    // ну и для наглядности внутри шкалы отобразим собственно возраст
                    anchors.fill: parent
                    text: "Age = " + age
                    font.pixelSize: 11
                }
            }
        }
    }
    ListView
    {
        anchors.fill: parent
        delegate: contactDelegate
        model: myModel // тут мы указываем имя нашей модели, которую подключили в Qt
        spacing: 10 // отступ
    }
}

После запуска получаем наш список контактов (не могу никак привыкнуть к линушному GIMPу, так что прошу сильно не пинать):

Дальше всё ограничивается лишь вашей фантазией...