Logs
Consultez les logs.
OK
Liste des données
Consultez la liste des données.
OK
Loading...
Formulaire
Saisissez vos données.
Enregistrer
Annuler

Références QML

Vues
132

Vous souhaitez réaliser des applications graphiques hautes performances en C++ avec la bibliothèque graphique Qt fournissant le langage QML capable d'exploiter la puissance des processeurs graphiques GPU afin de bénéficier de l'accélération matérielle pour créer des interfaces graphiques fluides multiplateformes orientées bureau (Windows, Linux, Mac OS) ou mobile (Android, iOS).

image.png



Gestion de la fenêtre principale en QML (MainWindow.qml)


image.png


On importe les composant QML. 

...
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
...

On importe les composant C++. 

...
import rdv.History
import rdv.Converter
...

On crée la fenêtre principale. 

...
ApplicationWindow {
    id: mainWindow
    ...
    visible: true
    color: "transparent"
    ...
}
...

On fixe les dimensions de la fenêtre. 

...
ApplicationWindow {
    id: mainWindow
    ...
    width: 335
    height: 505

    minimumWidth: 335
    minimumHeight: 505

    maximumWidth: 335
    maximumHeight: 505
    ...
}
...

On définit la couleur de fond. 

...
ApplicationWindow {
    id: mainWindow
    ...
    background: Rectangle {
        color: "#1f1f27"
        topLeftRadius: 12.5
        topRightRadius: 12.5
    }
    ...
}
...


Entête de page


image.png

On crée une entête de page. 

...
ApplicationWindow {
    id: mainWindow
    ...
    header: RowLayout {
        spacing: 0
        height: 50
        ...
    }
    ...
}
...

On ajoute une icône de menu dans l'entête de page (1). 

...
ApplicationWindow {
    id: mainWindow
    ...
    header: RowLayout {
        ...
        StyledDrawerButton {
            id: drawerButton

            iconSource: "qrc:/img/icon_menu.png"

            Layout.leftMargin: 6
            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight

            onClicked: {
                if (drawerMainList.opened)
                    drawerMainList.close();
                else
                    drawerMainList.open();
            }
        }
        ...
    }
    ...
}
...

On ajoute un espace vide dans l'entête de page (3). 

...
ApplicationWindow {
    id: mainWindow
    ...
    header: RowLayout {
        ...
        Item {
            Layout.fillWidth: true
        }
        ...
    }
    ...
}
...

On ajoute une icône de l'historique dans l'entête de page (4). 

...
ApplicationWindow {
    id: mainWindow
    ...
    header: RowLayout {
        ...
        StyledDrawerButton {
            id: historyButton

            Layout.rightMargin: 6
            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight

            iconSource: "qrc:/img/icon_history.png"
            onClicked: {
                historyListView.model = History.list;
                drawerHistory.open();
            }
        }
        ...
    }
    ...
}
...

Pile de vue


image.png

On crée une pile de vue pour le contenu de la fenêtre principale. 

...
ApplicationWindow {
    id: mainWindow
    ...
    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: drawerList.model.get(0).page
        clip: true
    }
    ...
}
...

Panneau de navigation gauche


image.png

On crée un panneau de navigation à gauche de la fenêtre principale. 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerMainList

        width: parent.width * 0.75
        height: parent.height
        edge: Qt.LeftEdge

        modal: true
        dim: true
        interactive: true
        ...
    }
    ...
}
...

On crée une couleur de fond dans le panneau de navigation gauche. 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerMainList
        ...
        background: Rectangle {
            topRightRadius: 12.5
            bottomRightRadius: 12.5
            color: "#2e2e2e"
        }
        ...
    }
    ...
}
...

On ajoute une liste de vues dans le panneau de navigation gauche. 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerMainList
        ...
        ColumnLayout {
            anchors.fill: parent

            ListView {
                id: drawerList

                clip: true
                spacing: 4

                Layout.fillWidth: true
                Layout.fillHeight: true

                Layout.topMargin: 25
                Layout.leftMargin: 10
                Layout.rightMargin: 10
                ...
            }
            ...
        }
        ...
    }
    ...
}
...

On crée une liste de modèles dans le panneau de navigation gauche. 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerMainList
        ...
        ColumnLayout {
            ...
            ListView {
                id: drawerList
                ...
                model: ListModel {
                    ListElement {
                        name: "Standard"
                        icosource: "qrc:/img/icon_calculator.png"
                        page: "qrc:/rdv/calculator/src/qml/Calculator.qml"
                        section: "Calculators"
                    }
                    ListElement {
                        name: "Angle"
                        icosource: "qrc:/img/icon_angle.png"
                        page: "qrc:/rdv/calculator/src/qml/Converter.qml"
                        section: "Converters"
                    }
                    ListElement {
                        name: "Data"
                        icosource: "qrc:/img/icon_data.png"
                        page: "qrc:/rdv/calculator/src/qml/Converter.qml"
                        section: "Converters"
                    }
                }
                ...
            }
            ...
        }
        ...
    }
    ...
}
...

On initialise la zone de section dans le panneau de navigation gauche (1). 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerMainList
        ...
        ColumnLayout {
            ...
            ListView {
                id: drawerList
                ...
                section.property: "section"
                section.criteria: ViewSection.FullString

                section.delegate: Rectangle {
                    height: 28
                    color: "transparent"

                    required property string section

                    Text {
                        text: section
                        color: "white"
                        font.pixelSize: 14
                    }
                }
                ...
            }
            ...
        }
        ...
    }
    ...
}
...

On définit le délégué du modèle dans le panneau de navigation gauche (2). 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerMainList
        ...
        ColumnLayout {
            ...
            ListView {
                id: drawerList
                ...
                delegate: StyledToolButton {
                    iconSource: icosource
                    iconH: 28
                    iconW: 28
                    width: drawerList.width
                    height: 48
                    textButton: name
                    textBold: false

                    textLeftMargin: 5
                    imageLeftMargin: 5

                    textItemAlign: Qt.AlignLeft

                    onClicked: {
                        drawerMainList.close();

                        if (drawerList.section === "Calculators")
                            historyButton.visible = true;
                        else
                            historyButton.visible = false;

                        if (section == "Converters")
                            Converter.currentConverter = name;

                        stackView.pop();
                        stackView.push(page);
                        calcType.text = name;
                    }
                }
                ...
            }
            ...
        }
        ...
    }
    ...
}
...

On ajoute une icône de paramétrage dans le panneau de navigation gauche (3). 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerMainList
        ...
        ColumnLayout {
            ...
            StyledToolButton {
                id: settingsButton

                textButton: "Settings"
                textBold: false

                iconSource: "qrc:/img/icon_settings.png"

                contentSpacing: 5
                imageLeftMargin: 5
                textItemAlign: Qt.AlignLeft

                Layout.fillWidth: true
                Layout.margins: 10
                Layout.minimumHeight: 40
                Layout.maximumHeight: 40

                onClicked: {}
            }
            ...
        }
        ...
    }
    ...
}
...

Panneau de navigation bas


image.png

On crée un panneau de navigation en bas de la fenêtre principale. 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerHistory
        width: mainWindow.width
        height: 310
        modal: true
        interactive: true
        edge: Qt.BottomEdge
        ...
    }
    ...
}
...

On crée une liste de vues dans le panneau de navigation bas. 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerHistory
        ...
        ListView {
            id: historyListView
            anchors.centerIn: parent
            width: 250
            height: parent.height
            clip: true
            spacing: 5
            ...
        }
        ...
    }
    ...
}
...

On définit le délégué du modèle dans le panneau de navigation bas. 

...
ApplicationWindow {
    id: mainWindow
    ...
    Drawer {
        id: drawerHistory
        ...
        ListView {
            id: historyListView
            ...
            delegate: StyledToolButton {
                width: parent.width
                height: 48
                textButton: modelData

                textLeftMargin: 5
                textItemAlign: Qt.AlignLeft

                onClicked: {
                    History.currentItem = modelData;
                    drawerHistory.close();
                }
            }
            ...
        }
        ...
    }
    ...
}
...