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
}
...
}
...
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();
}
}
...
}
...
}
...
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
}
...
}
...
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: {}
}
...
}
...
}
...
}
...
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();
}
}
...
}
...
}
...
}
...