QML, создание кнопки Button

Для создания большинства приложений требуются стандартные элементы управления, такие как кнопки и поля ввода. И если с полями ввода в Desktop-приложениях в QML всё не так плохо, то кнопок просто напросто нет. Благо порядок создания кнопки довольно прост. Именно о кнопки и будет эта статья.



Для начала создадим любой тип проекта Qt Quick (пользовательский интерфейс либо Приложение).
Следующим этапом надо создать файл QML (QML -> Файл QML) и назовём его Button.qml. Этот файл и будет содержать описание нашей кнопки.

Внутри файла находится описание прямоугольника. Нарастим его до кнопки:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5

import QtQuick 1.1

Rectangle {

    property string text: "button" // переменная, содержащая текст, который будет отображаться в кнопке

    width: 100 // ширина

    height: 62 // высота

    color: marea.pressed ?  "orange" : "lightblue" // зависимость цвета кнопки состояния нажатия MouseArea

    Text

    {

        verticalAlignment: Text.AlignVCenter // выравнивание текста по вертикали внутри поля TEXT

        horizontalAlignment: Text.AlignHCenter // выравнивание текста по горизонтали внутри поля TEXT

        anchors.fill: parent // растягиваем птекстовое поле во всю ширину родительского объекта (т.е. во весь прямоугольник/кнопку)

        text: parent.text

    }

    MouseArea

    {

        id: marea // id для работы с этим полем (как имя объекта в С++)

        anchors.fill: parent // и поле тоже растягиваем на всю кнопку

    }

}

Большая часть дела уже сделана. Осталось добавить эту кнопку на нашу основную форму, указать координаты и запустить. После всех изменений главный qml файл станет выглядеть следующим образом:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5

import QtQuick 1.1

Rectangle {

    width: 360

    height: 360

    Text {

        anchors.centerIn: parent

        text: "Hello World"

    }

    MouseArea {

        anchors.fill: parent

        onClicked: {

            Qt.quit();

        }

    }

    Button

    {

        text: "Кнопка" // текст в кнопке

        x: 15 // координата Х

        y: 15 // координата Y

    }

}

Запускайте и играйтесь :)