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

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

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

Базовые типы в QML
Итак, наше первое приложение - очень простой пример "Hello world", который демонстрирует основные понятия  QML.

Cкриншот этого приложения:











QML код этого приложения:


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
     }
 }

Разберем код по шагам:

Import

Во-первых, мы должны импортировать типы, в которых мы нуждаемся для этого примера. Большинство файлов QML используют встроенные типы QML (такие как: Rectangle, Image, ...), которые пришли с QT:

    import QtQuick 1.0


Элемент Rectangle

    Rectangle {
        id: page
        width: 500; height: 200
        color: "lightgray"


Мы объявляем рутовый (root) элемент типа Rectangle (Прямоугольник). Это - один из основных стандартных блоков, которые Вы можете использовать, чтобы создать приложение в QML. Мы присваем этому эдементу id, для возможности обращений к ниму позже. Назовем этот элемент "page". Мы также устанавливаем ширину (свойство: width), высоту (свойство: height) и цвет (свойство: color)  элемента. Элемент Rectangle содержит и много других свойств (таких как x и y), но иы оставим в них значения по умолчанию.

Элемент Text

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }


Здесь мы добавляем элемент Text, который показывает текст 'Hello world!'. Элемент Text в этом примере представляет собой дочерний элемент рутового элемента Rectangle. Свойство "y" используется, чтобы задать вертикальную позицию элемента Text на 30 пикселов ниже от вершины его родителя.

Свойсьво anchors.horizontalCenter отвечает за горизонтальную центровку элемента. В нашем случае мы определяем, что наш элемент Text должен быть горизонтально отцентрован внутри элемента page.


Свойства font.pointSize и font.bold определяют параметры шрифта (жирный шрифт размера 24).


Исходный код примера:

http://qml.ucoz.com/load/primery_na_qml/primer_k_state_quot_bazovye_tipy_v_qml_quot/2-1-0-2




Источник: http://doc.qt.nokia.com/4.7-snapshot/qml-tutorial1.html
Категория: Обучение QML | Добавил: CYAN (11.06.2011) | Автор: CYAN E W
Просмотров: 4227 | Теги: QML Text, пример QML, QML Rectangle, QtQuick, базовые типы QML | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

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

Все статьи [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 пользователей и разработчиков