Разработка приложений на C++_Практическая работа №9

Модуль 3 Тема 3.1. Библиотеки системных компонентов

1

1. Используйте компонент для встраивания компонентов в QML.

import QtQuick 2.0 import Sailfish.Silica 1.0

Page {

objectName: "mainPage" allowedOrientations: Orientation.All

Rectangle {

id: mainRect anchors.fill: parent

property var mainRectComponent: null

Column {

id: mainColumn spacing: 5

width: parent.width property real count: 0

function deleteItems(object) { object.destroy()

}

function createItem() { var color = 'lightblue'

2

if (mainColumn.count % 3 === 1) color = 'lightgreen'

else if (mainColumn.count % 3 === 2) color = 'lightyellow'

mainColumn.count++

// Создаем компонент

var obj = itemCompont.createObject(mainColumn, {"color": color, "width": mainRect.width})

//obj.setCurentObject(obj)

obj.setCurrentText('Component' + mainColumn.count.toString()) obj.deleteThis.connect(mainColumn.deleteItems)

}

}

Button {

anchors.top: mainColumn.bottom anchors.topMargin: 10 anchors.right: mainRect.right anchors.rightMargin: 10

text: 'Добавить в'

onClicked: { mainColumn.createItem()

}

}

3

Component {

id: itemCompont

Rectangle {

id: compontRect color: 'blue' implicitWidth: 200 implicitHeight: 50

property string currentObject: ''

signal deleteThis(var obj)

// Устанавливаем содержимое текста function setCurrentText(textName) {

interText.text = textName

}

Text {

id: interText anchors.left: parent.left anchors.leftMargin: 10

anchors.verticalCenter: parent.verticalCenter text: qsTr("text")

}

Button { anchors.margins: 5 anchors.top: parent.top

anchors.bottom: parent.bottom anchors.right: parent.right

4

text: 'Удалить'

onClicked: { compontRect.deleteThis(compontRect)

}

}

}

}

}

}

-`Rectangle {...}`: определяется прямоугольник, который занимает всю площадь страницы.

-`id: mainRect`: устанавливается идентификатор (ID) для прямоугольника в виде "mainRect".

-`anchors.fill: parent`: устанавливается привязка прямоугольника ко всем границам родительского элемента (в данном случае, страницы).

-`property var mainRectComponent: null`: создается свойство (property) mainRectComponent, которому по умолчанию присваивается значение null.

Это свойство пока не используется в коде.

5

-`Column {...}`: определяется компонент Column, который является контейнером для вертикального расположения объектов.

-`id: mainColumn`: устанавливается идентификатор для компонента Column в

виде "mainColumn".

-`spacing: 5`: задается промежуток между объектами внутри Column.

-`width: parent.width`: задается ширина компонента Column, равная ширине родительского элемента (в данном случае, прямоугольника).

-`property real count: 0`: создается свойство count с типом "real"

(действительное число), которому по умолчанию присваивается значение 0.

Это свойство будет использоваться для подсчета количества созданных элементов списка.

- `function deleteItems(object) {...}`: определяется функция deleteItems, которая принимает объект object в качестве аргумента и удаляет его из компонента

Column.

6

-`function createItem() {...}`: определяется функция createItem, которая создает новый элемент списка с определенным цветом, порядковым номером и кнопкой "Удалить".

-`var color = 'lightblue'`: задается значение переменной color равное 'lightblue'.

-`if (mainColumn.count % 3 === 1)`...: задается логика выбора цвета для создаваемых элементов списка.

-`mainColumn.count++`: увеличивается значение свойства count для подсчета количества созданных элементов списка.

-`var obj = itemCompont.createObject(mainColumn, {"color": color, "width": mainRect.width})`: создается экземпляр компонента itemCompont и

добавляется в компонент Column. Значения свойств color и width передаются в объект созданный через createObject.

-`obj.setCurrentText('Component' + mainColumn.count.toString())`: задается текст созданного компонента.

-`obj.deleteThis.connect(mainColumn.deleteItems)`: устанавливается связь сигнала deleteThis объекта obj с функцией deleteItems компонента Column.

7

-`Button {...}`: определяется компонент Button, который будет использоваться для добавления нового элемента списка.

-`onClick: {...}`: устанавливается обработчик события "клик" на кнопке.

-`mainColumn.createItem()`: вызывается функция createItem, которая создает новый элемент списка.

-`Component {...}`: определяется компонент itemCompont, который содержит прямоугольник с текстом и кнопкой "Удалить".

-`id: itemCompont`: устанавливается идентификатор для компонента в виде

"itemCompont".

- `Rectangle {...}`: определяется прямоугольник внутри компонента

itemCompont.

-`color: 'blue'`: задается цвет прямоугольника по умолчанию.

-`implicitWidth: 200`: указывается ширина прямоугольника по умолчанию.

-`implicitHeight: 50`: указывается высота прямоугольника по умолчанию.

8

-`property string currentObject: ''`: создается свойство currentObject, которому по умолчанию присваивается пустая строка. Это свойство пока не используется в коде.

-`signal deleteThis(var obj)`: определяется сигнал deleteThis, который принимает объект obj в качестве аргумента.

-`function setCurrentText(textName) {...}`: определяется функция

setCurrentText

GPT + Midjourney, [09.06.2023 0:15]

, которая задает текст для объекта interText.

-`Text {...}`: определяется объект Text, который будет содержать текст внутри элемента списка.

-`Button {...}`: определяется компонент Button, который будет удалить элемент списка при нажатии.

-`onClicked: {...}`: устанавливается обработчик события "клик" на кнопке

"Удалить".

9

- `compontRect.deleteThis(compontRect)`: вызывается сигнал deleteThis

объекта compontRect.

Этот код создает простой список элементов и демонстрирует пример использования функций, свойств и сигналов. Он является хорошим основанием для дальнейшей разработки более сложных приложений на

Sailfish OS.

2. Напишите код определения компонента в файле.

QML поддерживает использование JavaScript для динамического создания /

уничтожения объектов.Существует два способа динамического создания объектов:

Если компонент встроен в файл QML, вы можете использовать компонент напрямуюcreateObject()Метод создания компонента; использование компонентаdestroy()Метод удаления компонентов, которые были созданы.destroy()В методе можно указать задержку, но если она не указана,

при необходимости она будет удалена.

Component.createObject()В методе первый параметр указывает его родительский объект, а второй параметр может указывать некоторые параметры этого компонента.

MainPage.qml

import QtQuick 2.0 import Sailfish.Silica 1.0

10