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

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


develop:qt:quick3

Это старая версия документа!


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
 

GridView


:!: Пример:
 

PathView


:!: Пример:
 

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


:!: Пример:
 

:!: Пример:
 

:!: Пример:
 
develop/qt/quick3.1630332122.txt.gz · Последнее изменение: 2021/08/30 14:02 — admin