QtOnAndroid

QML Interactive UI Elements

← QML Javascript | ● | QML Window vs Widget →

QML becomes interactive by placing a translucent MouseArea over an element. 

MouseArea {
    anchors.fill: ...
    onClicked: {
       ... execute some JavaScript code ...
    }
}

Any change of an element’s property can be overlayed with a animated transition by specifying a “Behavior”-element: 

Behavior on <property> {
    ...
}

So a simple button class with a scaling animation on a button click can be implemented with QML as follows (in Button.qml): 

import QtQuick 2.0

Item {
    id: button

    signal clicked
    property string text
    property color: "white"

    width: 100
    height: 20

    Rectangle {
        anchors.fill: parent
        color: "black"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: button.clicked()
        onPressed: button.scale = 0.9
        onReleased: button.scale = 1.0
    }

    Text {
        id: buttonText
        color: button.color
        anchors.centerIn: parent
        text: button.text
        font.pointSize: 10; font.bold: true
    }

    Behavior on scale {
        NumberAnimation { duration: 30 }
    }
}


← QML Javascript | ● | QML Window vs Widget →

Options: