Разработка приложений на C++_Практическая работа №8
.pdf
2. GridView
GridView { id: gridView width: 400 height: 400
cellWidth: 200 cellHeight: 200
model: myModel
delegate: Rectangle { width: 200
height: 200
color: model.color
Text {
anchors.centerIn: parent text: model.color
color: "white"
}
}
MouseArea { anchors.fill: parent hoverEnabled: true
property bool isPressed: false property int startY: 0 property int contentY: 0
onPressed: { isPressed = true startY = mouse.y
contentY = gridView.contentY
}
5
onReleased: { isPressed = false
}
onPositionChanged: { if (isPressed) {
var deltaY = mouse.y - startY gridView.contentY = contentY - deltaY
}
}
}
}
ListModel {
id: myModel
ListElement { color: "red" } ListElement { color: "green" } ListElement { color: "blue" } ListElement { color: "yellow" } ListElement { color: "orange" } ListElement { color: "purple" } ListElement { color: "pink" } ListElement { color: "brown" }
}
6
Этот код создает страницу с сеткой GridView, содержащей ячейки,
заполненные цветами, которые определяются элементами в модели ListModel.
В каждой ячейке также есть простой текст, отображающий цвет ячейки.
Также в коде есть блок MouseArea, который позволяет пользователю прокручивать содержимое GridView, перетаскивая его вверх или вниз при нажатии на мышь и перемещении ее вверх или вниз.
Атрибуты GridView, такие как ширина и высота ячейки, определяют размеры каждой ячейки в пикселях. Это позволяет установить размер и расположение каждой ячейки в сетке. Атрибут model указывает на модель данных, которую следует использовать для отображения элементов в ячейках.
Делегат определяет внешний вид каждой ячейки и содержит Rectangle и Text элементы. Квадрат задает цвет ячейки, который определяется значением модели данных. Текст отображает значение цвета в виде текста.
3. PathView
7
В целом, PathView является полезным инструментом для любого
разработчика, который хочет создать интерактивный, эстетичный и
интуитивно понятный интерфейс на базе Qt Quick
ListModel { id: listm
ListElement {
name: "Bill Jones"
icon: "Qt_logo_2016.svg"
}
ListElement { name: "Jane Doe"
icon: "Qt_logo_2016.svg"
}
ListElement {
name: "John Smith"
icon: "Qt_logo_2016.svg"
}
}
Rectangle {
width: 240; height: 200 anchors.centerIn: parent
Component { id: delegate
Column {
id: wrapper
opacity: PathView.isCurrentItem ? 1 : 0.5 Image {
anchors.horizontalCenter: nameText.horizontalCenter width: 64; height: 64
source: icon
}
Text {
id: nameText text: name font.pointSize: 16
8
}
}
}
PathView { anchors.fill: parent model: listm delegate: delegate path: Path {
startX: 120; startY: 100
PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 } PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
}
}
}
В данном коде сначала определяется ListModel с несколькими
элементами, каждый из которых имеет имя и иконку.
Затем определяется прямоугольник с фиксированной шириной и
высотой, который содержит PathView. PathView используется для размещения
9
элементов списка вдоль заданного пути. В этом случае путь определяется с помощью PathQuad, чтобы создать кривую, которая начинается в центре прямоугольника, проходит через верхнюю часть прямоугольника и возвращается в центр.
Каждый элемент списка отображается с помощью delegate, который является Component, содержащим Column, Image и Text. Image и Text
отображают имя и иконку элемента, а Column используется для группировки этих элементов в столбцы.
Каждый элемент списка имеет свойство opacity, которое устанавливает значение 1 для текущего элемента и значение 0.5 для остальных элементов.
Это делается с помощью PathView.isCurrentItem.
Изображение Qt_logo_2016.svg используется в качестве иконки для каждого элемента списка.
10
Модуль 2. Расширенные возможности Qt Quick
Тема 2.7. Многопоточность Практика
1
1. WorkerScript
WorkerScript также предоставляет механизмы для работы с работами-
исполнителями, которые могут использоваться для управления выполнением задач, контроля над утилизацией ресурсов и т.д.
//MainPage.qml
ListView {
width: parent.width height: parent.height
model: 10
delegate: Item { width: parent.width height: 30
Text {
anchors.centerIn: parent text: "Thread " + index
}
WorkerScript {
id: workerScript
source: "worker.js"
onMessage: {
console.log("Thread " + message.index);
}
}
2
Component.onCompleted: {
workerScript.sendMessage({ "index": index });
}
}
}
// worker.js
WorkerScript.onMessage = function(message) { console.log("Thread " + message.index);
}
Вфайле MainPage.qml:
●Создается ListView, который занимает всю доступную ширину и высоту родительского элемента.
●Устанавливается модель ListView в значение 10, что означает, что список будет состоять из 10 элементов.
3
●В качестве делегата для каждого элемента списка используется объект
Item.
●Установлено свойство width для элемента Item, чтобы оно равнялось ширине родительского элемента.
●Установлено свойство height для элемента Item, чтобы оно было равно
30 пикселям.
●Создается компонент WorkerScript внутри элемента Item.
●Устанавливается свойство source для компонента WorkerScript,
указывающее на файл worker.js.
●Указывается обработчик события onMessage для компонента
WorkerScript, который выводит в консоль сообщение о текущем индексе.
●В методе Component.onCompleted, который выполняется после создания элемента, отправляется сообщение с текущим индексом в компонент
WorkerScript.
Вфайле worker.js:
●Задается обработчик события onMessage для WorkerScript, который выводит в консоль сообщение о текущем индексе.
Таким образом, в результате выполнения этого кода в консоли будут отображены сообщения о текущих индексах каждого элемента списка.
2. Фиббоначчи
Реализуйте параллельное вычисление n-го элемента из последовательности Фибоначчи с помощью WorkerScript
// main.qml
import QtQuick 2.0 import Sailfish.Silica 1.0
4