martedì 16 luglio 2013

Esempio GUI con QtQuick 2.0



Riprendendo la serie di esempi di GUI stavolta e' la volta di QtQuick (Qt 5.1)
Da notare che la release 5.1 i problemi all'editor visuale di QtQuick all'interno di QtCreator sembrano essere risolti per cui per progettare la pagina e' sufficiente fare doppio clic sul file .qml della colonna Progetti

Editor Visuale di QtQuick in QtCreator


------------------------------------------
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

ApplicationWindow {
    title: qsTr("Esempio")
    width: 250
    height: 160
    
    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }

    TextField {
        id: text_field1
        x: 21
        y: 17
        width: 200
        height: 20
        text: ""
        placeholderText: ""

    }

    ProgressBar {
        id: progress_bar1
        x: 21
        y: 54
    }

    Slider {
        id: slider__horizontal_1
        x: 21
        y: 101
        value: 0.5
        onValueChanged: aggiorna();
        function aggiorna()
            {
            text_field1.text = slider__horizontal_1.value.toFixed(2).toString();
            progress_bar1.setValue(slider__horizontal_1.value);

        }

    }
}