Русскоязычный портал о QML и QtQuick, QmlPortal What the duck

Каталог статей

Главная » Статьи » Обучение QML

QML компоненты
Этот пример дополняет пример из статьи "Базовые типы в 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
Категория: Обучение QML | Добавил: CYAN (11.06.2011) | Автор: CYAN E W
Просмотров: 6005 | Комментарии: 1 | Теги: color picker, QtQuick, QML Rectangle, пример QML, QML Component, QML Grid, QML MouseArea, QML, QML Text, QML signal | Рейтинг: 3.5/2
Всего комментариев: 1
1  
hi

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела

Все статьи [0]
Обучение QML [8]
Статьи с базовой информацией о языке QML
Статьи по QML [6]
Статьи по QML
QML для профессионалов [4]
Статьи по QML-темам повышенной сложности
Ссылки на видео [5]
Ссылки на видео с демонстрацией возможностей QML
Ссылки на материалы по QML в интернете [2]
Ссылки на полезные материалы по QML в интернете
Обо всём [1]
Статьи на разные темы, не имеющие отношение к QML и QtQuick

Поиск на сайте

Облако тэгов

kinetic scroll анимация интерфейса кинетик скролл создание интерфейса path view qml видео демонстрация qml QML Component QML Grid Demo QML browser plugin просмотр QML форм QML signal QML Transition базовые типы QML QML Text пример QML экспорт qml из GIMP QML Rectangle color picker QML MouseArea qml export QML State экспорт QML из Photoshop QML QtQuick Web-browser Набор виджетов для QML статьи о QML на русском языке MeegoHarmattan N9/N950 game Sprite Animation GLSL fragment shader Qt Quick 2 Анимация Easing Easing curves Сглаживающие кривые C++ QGraphicsView Q_INVOKABLE Интеграция QML и C++ QML Particle System QtQuick.Particles QML Scene Graph javascript глобальные переменные Qt Mobility QtMultimediaKit map QtMobility.location Debian package Harmattan QtCreator D.U.C.K. H.U.N.T. QML пример

Статистика сайта

Статей: 26
Новостей: 6
Файлов: 10
Форум: 19/46
Коментариев: 6

Посетители

Полезные ресурсы

сайт Российского Qt сообщества The FRUCT program Российская сеть MeeGo пользователей и разработчиков