Разработка приложений на C++_Практическая работа №8
.pdf
Модуль 2. Расширенные возможности Qt Quick
Тема 2.5. Модели Практика
1
1. XmlListModel
Получить и отобразить курсы валют в виде списка из ресурса ЦБ РФ по адресу http://www.cbr.ru/scripts/XML_daily.asp
Для решения данной задачи будет использовано XmlListModel.
Добавить в .pro файлы:
QT += xmlpatterns
// MainPage.qml import QtQuick 2.0 import Sailfish.Silica 1.0
import QtQuick.XmlListModel 2.0
Page {
objectName: "mainPage" allowedOrientations: Orientation.All
XmlListModel {
id: exchangeRatesModel
source: "http://www.cbr.ru/scripts/XML_daily.asp" // URL to the XML data source
query: "/ValCurs/Valute"
XmlRole { name: "name"; query: "Name/string()" } XmlRole { name: "charCode"; query: "CharCode/string()" } XmlRole { name: "nominal"; query: "Nominal/string()" } XmlRole { name: "value"; query: "Value/string()" } onStatusChanged: {
2
if (status === XmlListModel.Ready) { console.log("Got", count, "exchange rates");
} else if (status === XmlListModel.Error) { console.error("Error loading exchange rates:", errorString());
}
}
}
ListView {
anchors.fill: parent
model: exchangeRatesModel spacing: 160
delegate: Item { width: parent.width height: 60
Column {
Text { text: "Name: " + name }
Text { text: "Code: " + charCode }
Text { text: "Nominal: " + nominal }
Text { text: "Value: " + value }
}
}
}
}
Для получения и отображения курсов валют в виде списка можно использовать компонент XmlListModel, который позволяет парсить и отображать данные из xml-файла.
3
Сначала создадим объект XmlListModel и укажем адрес ресурса ЦБ РФ,
откуда будем получать данные.
Мы указали запрос "/ValCurs/Valute", что означает, что мы хотим получить данные из элементов "Valute" внутри элемента "ValCurs".
Мы указали, что модель для элемента ListView будет объект
XmlListModel, а делегатом будет элемент Text, который будет отображать название валюты и ее курс в рублях.
В итоге, чтобы получить и отобразить курсы валют в виде списка из ресурса ЦБ РФ, нам понадобится только эти два элемента: XmlListModel и ListView.
1. Repeater
Рассмотрим пример использования Repeater с моделью-числом.
import QtQuick 2.0 import Sailfish.Silica 1.0
Page {
objectName: "mainPage" allowedOrientations: Orientation.All
Rectangle { width: 400 height: 400
anchors.centerIn: parent color: "lightgreen"
Repeater {
model: 4
4
Rectangle { width: 100 height: 100 color: "pink" x: index * 50 y: index * 100
}
}
В этом примере мы создаем простой прямоугольник и используем
Repeater для повторения квадратов розового цвета по горизонтали. При этом мы задаем модель-число, равное 4, для указания того, что нужно создать 4
экземпляра компонента Rectangle. Затем мы определяем компонент, который будет повторяться, и задаем ему ширину, высоту, цвет и позицию по X.
5
Обратите внимание, что мы задаем позицию X используя свойство index,
которое представляет индекс текущего элемента в модели-числе. Так как ширина квадрата равна 50, мы задаем X для каждого экземпляра с помощью формулы index * 50.
6
Модуль 2. Расширенные возможности
Qt Quick
Тема 2.6. Представления Практика
1
1. ListView
Создать приложение, которое позволяет отображать список
(ListView) из прямоугольников (Rectangle) с использованием компонента ListModel в качестве модели. Модель должна содержать информацию о цвете фона прямоугольника, тексте,
отображаемом в прямоугольнике и цвете текста. Текст должен содержать название цвета фона прямоугольника.
Для начала нужно создать компонент RectItem.qml, который будет отображать каждый прямоугольник списка. В этом компоненте объявим свойства, которые будут содержать информацию о цвете фона, тексте и цвете текста прямоугольника:
RectItem.qml
Rectangle {
property color bgColor property string text property color textColor
width: 100 height: 50 color: bgColor
Text {
text: text
color: textColor anchors.centerIn: parent
}
}
2
Затем создадим модель RectListModel.qml, которая будет хранить список прямоугольников. Для этого воспользуемся стандартным QML
компонентом ListModel. Также объявим переменную colors, которая будет содержать доступные цвета фона прямоугольников:
RectListModel.qml import QtQuick 2.0 import Sailfish.Silica 1.0
ListModel {
ListElement { bgColor: "red"; text: "красный"; textColor: "white" } ListElement { bgColor: "green"; text: "зеленый"; textColor: "white" } ListElement { bgColor: "blue"; text: "синий"; textColor: "white" } ListElement { bgColor: "yellow"; text: "желтый"; textColor: "black" } ListElement { bgColor: "orange"; text: "оранжевый"; textColor: "white" }
property var colors: ["red", "green", "blue", "yellow", "orange"]
}
Теперь осталось создать основной компонент MainPage.qml. В нем объявим ListView, который будет отображать список прямоугольников. Для модели этого ListView укажем нашу RectListModel. В качестве delegate для каждого элемента списка будем использовать компонент RectItem.
MainPage.qml import QtQuick 2.0 import Sailfish.Silica 1.0
Page {
objectName: "mainPage"
3
allowedOrientations: Orientation.All
Rectangle { width: 600 height: 700
color: "lightgrey"
ListView {
anchors.fill: parent
model: RectListModel {} delegate: RectItem {
bgColor: model.bgColor text: model.text
textColor: model.textColor
}
}
}
}
Теперь приложение должно отображать список прямоугольников с заданными цветом фона, текстом и цветом текста. Текстом каждого прямоугольника будет название его цвета фона.
4