Как легко творить прекрасное

Топик участвует в конкурсе «Умные телефоны за умные посты».

Давно я хотел посмотреть на QtQuick и QML, а тут вот и повод. Планировал начать классически — с Hello World, но Qt Creator при создании нового проекта генерит как раз таки Hello World, так что героически его написать самому уже не получится. Ну что ж, тогда замахнемся на что-то побольше. Напишем такую программку, которая бы при запуске показывала что-то случайное, но красивое и вдохновляющее, а по клику в любом месте закрывалась. Мне вот нравятся картинки природы. Что меня тронуло до глубины души, так это тот факт, что данную программу в незнакомой IDE и на фактически незнакомом языке я написал где-то за 500 секунд, 400 из которых разбирался в Qt Creator и читал один короткий туториал.




Итак, ставим Qt SDK, запускаем Qt Creator.
Создаём новый проект типа «Приложение Qt Quick» (в визарде создания проекта можно всё оставлять по дефолту). В результате получаем тот самый Hello world, о котором я говорил в начале:

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

Нажимаем кнопку «Дизайн» — попадем в дизайнер. Удаляем элемент "Text" в Навигаторе. Вместо него из Библиотеки (панель внизу) выбираем компонент "Image" и бросаем его на форму. Дальше на вкладке «Компоновка» нажимаем кнопку «Заполнить предка», которая растянет нашу картинку на всю форму.
Для тех, кому на полдороги стало скучно мы прямо сейчас сделаем перерыв: переходим на вкладку "Image" и в поле «Источник» вставляем ссылку:

http://media.oboobs.ru/boobs/05055.jpg

Жмём Ctrl+R. Вот она наша программа, которая уже радует глаз!



Но суть была не в этом. Нам нужно разнообразие, а значит картинка каждый раз должна быть другая. Делается это так легко, что Вы даже глазом моргнуть не успеете. Для этого переходим в Редактор (кнопка слева вверху) и меняем код на вот такой:

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }

        Image {
            id: image1
            anchors.fill: parent
            source: "http://media.oboobs.ru/boobs/"+ getPictureId() + ".jpg"

            function getPictureId(number, length) {
                var str = '' + Math.round(Math.random() * 5055);
                while (str.length < 5) {
                    str = '0' + str;
                }
                return str;
            }
        }
    }
}

Мы всего лишь добавили генерацию ссылки на основе вызова функции getPictureId, которая возвращает значения от 00000 до 05055 (последняя на данный момент картинка на сайте).

Вот и всё — у нас есть программа, работающая сразу на куче мобильных и десктопных платформ, которую даже можно на досуге запустить разок-другой для поднятия настроения. И всё сделано буквально за пару минут. Честно скажу — меня такая простота сразила наповал. Порог вхождения в разработку на QML чрезвычайно низок, а сделать можно (с учётом возможности использовать всю мощь Qt и С++) проект любой сложности.
Дерзайте!