Qt Quick: Модель/Представление, Связь с С++

Модель/Представление

В QML предоставляет механизм отделения данных от их представления. За показ отвечают элементы представления и делегаты, а за поставку- элементы моделей.

Модели

Модель - предоставляет интерфейс для обращения к данным, может содержать и сами данные, но не обязательно.

Модель списка

Представлена элементом ListModel и содержит последовательность элементов: ListElement{…} ….
ListElement содержит свойства данных, все они определяются пользователем, стандартных нет.
Элементы можно описывать как вручную, так и динамически, поддерживаются функции типа: append(), insert(), remove(), move и т.д.

Пример: Статическое описание содержимого модели

import QtQuick 2.8
 
ListModel
{
    ListElement
    {
        artist: "Amaranthe"
        album: "Amaranthe"
        year: 2011
        cover: "qrc:/button-press.png"
    }
    ListElement
    {
        artist: "Dark Princess"
        album: "Without"
        year: 2005
        cover: "qrc:/button.png"
    }
    ListElement
    {
        artist: "Within"
        album: "The Unfo"
        year: 2011
        cover: "qrc:/atom.png"
    }
}

XML-модель

XmlListModel- тоже модель списка и используется для XML-данных. Задействует для заполнения данными опросы XPath и присваивает данные свойствам.
Для каждого определяемого свойства, определяем XmlRole, что является фактом создания св-ва, задаем ему name, а так же путь откуда извлечь и тип извлекаемых данных.

Пример: Описание Xml-модели

<?xml version = "1.0"?>
<CDs>
	<CD>
		<artist>Amaranthe</artist>
		<album>Amaranthe</album>
		<year>2011</year>
		<cover>qrc:/button-press.png</cover>
	</CD>
	<CD>
		<artist>Dark Princess</artist>
		<album>Without</album>
		<year>2005</year>
		<cover>qrc:/button.png</cover>
	</CD>
	<CD>
		<artist>Within</artist>
		<album>The Unfo</album>
		<year>2011</year>
		<cover>qrc:/atom.png</cover>
	</CD>
</CDs>

import QtQuick 2.8; import QtQuick.XmlListModel 2.0
 
XmlListModel
{
    source: "qrc:/CDs.xml"
    query: "/CDs/CD"
    XmlRole { name: "artist"; query: "artist/string()" }
    XmlRole { name: "album"; query: "album/string()" }
    XmlRole { name: "year"; query: "year/string()" }
    XmlRole { name: "cover"; query: "cover/string()" }
}

JSON-модель

Благодаря поддержке JavaScript, данные JSON можно использовать напрямую, например присвоить переменной и далее работать с ней.

Пример: JSON модель

import QtQuick 2.8;
 
var jsonModel = [
    {
        artist: "Amaranthe",
        album: "Amaranthe",
        year: 2011,
        cover: "qrc:/button-press.png",
    },
    {
        artist: "Dark Princess",
        album: "Without",
        year: 2005,
        cover: "qrc:/button.png",
    }
    ,
    {
        artist: "Within",
        album: "The Unfo",
        year: 2011,
        cover: "qrc:/atom.png",
    }
]

Представление данных

ListView

Отвечает за отображение данных модели в виде столбца или строки.
За отображение каждого элемента списка в отдельности отвечает делегат.

В примере, в роли делегата реализуем элемент Component, со свойством id, что бы можно было на него сослаться, в блоке Item определяем как будет отображаться каждый элемент нашего списка.
Далее определяем собсна саму модель ListView, в ней ставим focus, для навигации клавиатурой, добавляем header и footer, элемент highlight используется для показа текущего элемента. Так же, присваиваем ей определенные ранее модель и делегат.

Пример: Представление данных из JSON

import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Particles 2.0
import "qrc:/CDs.js" as CDs
 
ApplicationWindow
{
    width: 200; height: 360; visible: true
    Rectangle
    {
        id: mainrect
        anchors.fill: parent
        color: "gray"
        Component
        {
            id: delegate
            Item
            {
                width: mainrect.width; height: 70
                Row
                {
                    anchors.verticalCenter: parent.verticalCenter
                    Image
                    {
                        width: 64; height: 64
                        source: modelData.cover
                        smooth: true
                    }
                    Column
                    {
                        Text
                        {
                            color: "white"
                            text: modelData.artist
                            font.pointSize: 12
                        }
                        Text
                        {
                            color: "lightblue"
                            text: modelData.album
                            font.pointSize: 10
                        }
                        Text
                        {
                            color: "yellow"
                            text: modelData.year
                            font.pointSize: 8
                        }
                    }
                }
            }
        }
        ListView
        {
            focus: true
            header: Rectangle
            {
                width: parent.width; height: 30
                gradient: Gradient
                {
                    GradientStop { position: 0; color: "gray" }
                    GradientStop { position: 0.7; color: "black" }
                }
                Text
                {
                    anchors.centerIn: parent
                    color: "gray"; text: "CDs"
                    font.bold: true; font.pointSize: 20
                }
            }
            footer: Rectangle
            {
                width: parent.width; height: 30
                gradient: Gradient
                {
                    GradientStop { position: 0; color: "gray" }
                    GradientStop { position: 0.7; color: "black" }
                }
            }
            highlight: Rectangle
            {
                width: parent.width
                color: "darkblue"
            }
            anchors.fill: parent
            model: CDs.jsonModel
            delegate: delegate
        }
    }
}

GridView

GridView автоматически заполняет всю область элементами в табличном порядке, поэтому нет необходимости указывать кол-во строк/столбов.
Использование почти полностью идентично предыдущему примеру, разве что в делегате данные располагаются вертикально.

Пример: Представление данных из JSON

import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Particles 2.0
import "qrc:/CDs.js" as CDs
 
ApplicationWindow
{
    width: 380; height: 420; visible: true
    Rectangle
    {
        id: mainrect
        anchors.fill: parent
        color: "gray"
        Component
        {
            id: delegate
            Item
            {
                width: 120; height: 120
                Column
                {
                    anchors.centerIn: parent
                    Image
                    {
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: 64; height: 64
                        source: modelData.cover
                        smooth: true
                    }
                    Text
                    {
                        color: "white"; text: modelData.artist; font.pointSize: 12
                    }
                    Text
                    {
                        color: "lightblue"; text: modelData.album; font.pointSize: 10
                    }
                    Text
                    {
                        color: "yellow"; text: modelData.year; font.pointSize: 8
                    }
                }
            }
        }
        GridView
        {
            cellWidth: 120; cellHeight: 120
            focus: true
            header: Rectangle
            {
                width: parent.width; height: 30
                gradient: Gradient
                {
                    GradientStop { position: 0; color: "gray" }
                    GradientStop { position: 0.7; color: "black" }
                }
                Text
                {
                    anchors.centerIn: parent
                    color: "gray"; text: "CDs"
                    font.bold: true; font.pointSize: 20
                }
            }
            footer: Rectangle
            {
                width: parent.width; height: 30
                gradient: Gradient
                {
                    GradientStop { position: 0; color: "gray" }
                    GradientStop { position: 0.7; color: "black" }
                }
            }
            highlight: Rectangle
            {
                width: parent.width
                color: "darkblue"
            }
            anchors.fill: parent
            model: CDs.jsonModel
            delegate: delegate
        }
    }
}

PathView

Показывает элементы в виде замкнутой линии.

Делегат идентичен предыдущим. ключевой момент в создании элемента Path, этот элемент задает форму замкнутой линии, он присваивается свойству path элемента PathView, свойство pathItemCount определяет кол-во одновременно видимых элементов.

Пример: PathView JSON

import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Particles 2.0
import "qrc:/CDs.js" as CDs
 
ApplicationWindow
{
    width: 450; height: 170; visible: true
    Rectangle
    {
        anchors.fill: parent
        color: "gray"
        Component
        {
            id: delegate
            Item
            {
                width: item.width; height: item.height
                Column
                {
                    id: item
                    Image
                    {
                        width: 90; height: 90
                        source: modelData.cover
                        smooth: true
                    }
                    Text
                    {
                        color: "white"; text: modelData.artist; font.pointSize: 12
                    }
                    Text
                    {
                        color: "lightblue"; text: modelData.album; font.pointSize: 10
                    }
                    Text
                    {
                        color: "yellow"; text: modelData.year; font.pointSize: 8
                    }
                }
            }
        }
        Path
        {
            id: itemsPath
            startX: 45; startY: 80 // Не совсем понятны эти значения
            PathLine {x: 500; y: 80} // И эти тоже
        }
        PathView
        {
            id: itemsView
            focus: true
            anchors.fill: parent
            model: CDs.jsonModel
            delegate: delegate
            path: itemsPath
            pathItemCount: 4
        }
    }
}

Визуальная модель данных

Пример:

zxcx

Инструменты пользователя

Инструменты сайта

Содержание