Bienvenue sur le forum !

Si vous souhaitez rejoindre la communauté, cliquez sur l'un de ces boutons !

Qt 5 : 5.9.1 - Qt Creator : 4.4.0 - Qt Installer : 2.0.3 - JOM : 1.1.2 - Qt Build suite : 1.7.0 - VS Qt 5 : 2.0.0

QML : rendre son code plus clair (amateur)

27 May modifié dans Qt / QML / Qt Quick
Bonjour,

Voila je programme en C++ sur Qt et je suis en train de faire mon interface graphique via QML. Le probleme est que mon code devient imbitable avec tout les différents rectangle, image que j'ajoute au fur et à mesure. Je me demande donc s'il est possible de créer une page page1.qml et d'ajouter une sorte de page1.qml dans mon main.qml, ainsi lors de la compilation des que le compilateur verra dans mon main.qml page1.qml il mettra tout le contenu de la page1.qml (comme une sorte de preprocessing en C lors de la compilation).

j'espere que vous avez compris mon probleme ...

Merci d'avance pour votre aide

Réponses

  • slt,
    Que suis tu comme formation ?
    Car, comment dire, c'est juste un petit peu la base du QML, non !

    ...
    Page1 {
    ...
    }
    ...
    Il y a des livres, des exemples et tuto dans le sdk Qt, des video youtube ou sur site web comme par exemple https://qmlbook.github.io/
  • alors j’apprends tout seul, voici mon code :

    SwipeView {
    id: view

    currentIndex: p1
    anchors.fill: parent

    Item {
    id: p1
    page1.qml//mettre le contenu de page1.qml mais ca ne marche pas

    }
    Item {
    id: p2
    //mettre le contenu de page2.qml
    }
    Item {
    id: p3
    //mettre le contenu de page3.qml
    }
    }

    et page1.qml est :


    Text {
    id: text_p1
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    text: qsTr("page 1")
    }
    Je vois pas trop comment insérer ma page1.qml
  • SwipeView {
    id: view

    currentIndex: p1
    anchors.fill: parent

    Page1 {
    id: p1
    }
    Page2 {
    id: p2
    }
    Page3 {
    id: p3
    }
    }
  • 27 May modifié
    je te donne un exemple simple de mon probleme :

    voici le code de mon main.qml :

    import QtQuick 2.6
    import QtQuick.Window 2.2

    Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    }
    et dans mon fichier Page1.qml :

    import QtQuick 2.6
    import QtQuick.Window 2.2

    Rectangle {
    id: rectFond
    anchors.fill: window
    gradient: Gradient{
    GradientStop { position: 0.0; color: "#083286" }
    GradientStop { position: 1.0; color: "#000103" }
    }
    }
    Comme tu peux le voir, je souhaite tout simplement que mon composant (Page1.qml) change le fond de ma fenetre principal, or ca ne marche pas ma fenetre à son fond de couleur blanc, as tu une idée du probleme
  • Un "Window" n'hérite pas d'un "Item", mais contient l'item Root.
    // main.qml
    import QtQuick 2.6
    import QtQuick.Window 2.2

    Window {
    id: my_window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Page2 {
    anchors.fill: parent
    // ou
    // anchors.fill: my_window.contentItem
    }
    }
    // Page2
    import QtQuick 2.6
    import QtQuick.Window 2.2

    Rectangle {
    id: rectFond
    // anchors.fill: my_window.contentItem // A eviter ici
    gradient: Gradient{
    GradientStop { position: 0.0; color: "#083286" }
    GradientStop { position: 1.0; color: "#000103" }
    }
    }
  • Quand tu veux découper ton code, Clique droit sur un Item puis "Refactoring" puis "Déplacer le composant dans un fichier séparé"
  • ca marche, merci beaucoup !!
    parcontre il y a un point théorique que je ne comprend pas, pourquoi anchors.fill: parent marche, et non anchors.fill: window ? car anchors.fill sert juste a dire la référence et donc parent ou window c'est la meme chose : ca veut dire met le rectangle par rapport à la fenetre principal non ?
  • donc parent ou window c'est la meme chose
    et bien non. Donc j'en déduit que tu ne maîtrises pas non plus Qt GUI c++.
    "Window" n'hérite pas d'un "Item" tout comme "QWindow" n'hérite pas d'un "QWidget".
    N'hésites pas à regarder la doc de QWindow.
    "Window" créé la fenêtre et un "Item" principal invisible appelé "root". Et tous les enfants seront attachés à l'item root et non à la "window".
    Pour t'en persuader :
        Component.onCompleted: {
    console.log(my_window)
    console.log(my_window.contentItem) // L'item root
    console.log(my_page) // my_page est l'enfant de l'item root
    }
Connectez-vous ou Inscrivez-vous pour répondre.