Этот пример дополняет пример из статьи "Базовые типы в QML", добавляя в приложение палитру цветов для изменения цвета текста.
Наша палитра цветов сделана из шести ячеек с различными цветами. Чтобы избежать многократного повторения кода для каждой ячейки, мы создадим новый компонент 'Cell'. Использование компонента позволяет нам определить новый тип, который мы можем повторно использовать в других файлах QML. Компонент QML похож на черный ящик и взаимодействует с внешним миром только через свои свойства, сигналы и функции и при этом вообще может быть определен в своем собственном, отдельном файле QML. Имя файла нового компонента должно всегда начинаться с заглавной буквы.
QML код для нового компонента Cell.qml: import QtQuick 1.0 Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
width: 40; height: 25
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
}
Рассмотрим этот код по шагам:
Компонент Cell (ячейка).
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
width: 40; height: 25
Рутовый элемент нашего компонента - Item с id "container". Item - самый примитивный визуальный элемент в QML и часто используется в качестве контейнера для других элементов. property alias cellColor: rectangle.color
Здесь мы объявляем свойство cellColor. Этот свойство нашего компонента будет доступно снаружи и это позволит нам создавать ячейки с различными цветами. Это свойство - только алиас (псевдоним) для существующего свойства rectangle.color.
signal clicked(color cellColor)
Мы хотим, чтобы у нашего компонента также был сигнал, который будет срабатывать при щелчке на элементе левой кнопкой мыши. В качестве параметра ему будет передаваться алиас cellColor. Позже мы будем использовать этот сигнал, чтобы менять цвет текста в главном файле QML.
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
Собственно сама наша ячейка - цветной прямоугольник с id "rectangle".
Свойство anchors.fill - удобный способ установить размер элемента. В этом случае у прямоугольника будет тот же самый размер, как и у его родительского элемента.
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
Чтобы изменять цвет текста, кликая на ячейку, мы создаем элемент MouseArea с тем же самым размером как и его родительский элемент. В MouseArea определяются сигналы - события, инициируемые передвижением мыши и нажатием на ее кнопки в пределах заданной области. В данном случае, мы привязываем к событию onClicked (щелчок левой кнопки мыши) созданный раннее нами сигнал clicked с передаваемым ему свойством cellColor в качестве аргумента.
Главный файл QML
В нашем главном файле QML мы используем наш компонент Cell, чтобы создать палитру цветов:
import QtQuick 1.0
Rectangle {
id: page
width: 500; height: 200
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
Grid {
id: colorPicker
x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
rows: 2; columns: 3; spacing: 3
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
}
}
Мы создаем палитру цветов, помещая 6 ячеек с различными цветами в сетку (компонент Grid).
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
Когда пользователь кликает на ячейке, срабатывает наш сигнал clicked. При этом тексту helloText устанавливается такой же цвет, как и у нашей ячейки. Аналогично, мы можем реагировать и на остальные события мыши через свойства с именами "on<SignalName>".
Исходный код примера: http://qml.ucoz.com/load/primery_na_qml/primer_k_state_quot_qml_komponenty_quot/2-1-0-3
Источник: http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial2.html | 
