Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

click button qml



  • Hello,
    I would like by clicking on the button the rectangle content is displayed on the same page as the button in qml.
    Thank you

    below the code:

    Button {
        id:button1
        text: "charger page"
        //anchors.fill: parent
        onClicked:{
            ???????????
        }
    }
    Rectangle {
        id: name
        anchors{
            //top: texte_colonne_3.bottom
            left: parent.left
            top: rect.bottom
        }
        width:parent.width/3
        height: parent.height/3
        ??????????????
        color:"green"
    
    }


  • import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        width: 480
        height: 480
        visible: true
        title: qsTr("Show rectangle")
    
        Column {
            id: column
            spacing: 50 // spacing between button and rectangle
            anchors {
                top: parent.top
                topMargin: 100
                horizontalCenter: parent.horizontalCenter
            }
    
            Button {
                id: button
                text: "Show Rectangle"
                anchors.horizontalCenter: parent.horizontalCenter
                onClicked: {
                    rect.visible = true // green rectangle now visible
                    console.log("rectangle is visible!")
                }
            }
            Rectangle {
                id: rect
                visible: false // keeps rectangle hidden until button is clicked
                width: 200
                height: 200
                color: "green"
            }
        }
    }
    
    
    


  • Thank you for your answer Markkyboy . If I have two rectangle and each has its own button and each time I click button 1 -> rectangle 1 is displayed and if I click button 2 -> rectangle 2 is displayed. it is displayed on the same zone, at each click without recompiling. without using stackview rectangle.PNG



  • Post your current code.



  • @Markkyboy
    je voudrais appeler la page 1 ou page 2 pour qu'il s'affiche dans rectangle qui est dans main.qml suite à un appuye bouton. ainsi de suite
    //main.qml
    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.0

    Window {
    width: 600
    height: 600
    visible: true
    title: qsTr("Show rectangle")

    Column {
        id: column
        spacing: 50 // spacing between button and rectangle
        anchors {
            top: parent.top
            topMargin: 100
            horizontalCenter: parent.horizontalCenter
        }
        RowLayout{
            Button {
                id: button1
                text: "Show Rectangle Green"
                onClicked: {
                    rect.visible = true // green rectangle now visible
                    console.log("rectangle is visible!")
                }
            }
            Button {
                id: button2
                text: "Show Rectangle Red"
                onClicked: {
                    rect.visible = true // green rectangle now visible
                    console.log("rectangle is visible!")
                }
            }
        }
    
    
        Rectangle {
            id: rect
            visible: false // keeps rectangle hidden until button is clicked
            width: parent.width/1.5
            height: parent.height/1.5
            border.color: "Black"
           // color:"blue"
        }
    }
    

    }

    //page1.qml-------------------------

    import QtQuick 2.11
    import QtQuick.Controls 2.3
    Rectangle {
    id: rect1
    anchors.fill: parent
    color: "green"
    }

    //page2.qml----------------------------------
    import QtQuick 2.0
    import QtQuick.Controls 2.3
    import QtQuick.Layouts 1.3
    Rectangle {
    id: rect2
    anchors.fill: parent
    color: "red"
    }
    I want the red or green rectangle to show in the frame. With each click the content changes. without using stackview. here are the results after compilation rect.PNG



  • For simplicity and my time, I am laying out in one view, one file (main.qml)

    The idea here is to use the onClicked function of the button to change the Rectangle properties, in this case, the colour.

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        width: 300
        height: 480
        visible: true
        color: "white"
        title: qsTr("Red or Green Rectangle?")
    
        Row {
            id: row
            spacing: 20
            anchors {
                top: parent.top
                topMargin: 50
                horizontalCenter: parent.horizontalCenter
            }
            Button {
                id: button1
                text: "Green"
                onClicked: rect.color = "green"
            }
            Button {
                id: button2
                text: "Red"
                onClicked: rect.color = "red"
            }
        }
        Column {
            anchors {
                top: row.bottom
                topMargin: 50
                horizontalCenter: parent.horizontalCenter
            }
            Rectangle {
                id: rect
                width: 200; height: width
                color: "transparent"
                border {
                    color: "black"
                    width: 1
                }
            }
        }
    }
    
    


  • @Markkyboy Thank you for your answer . my goal is to really display page 1 or page 2 in the rectangle of "main. qml" ... the color is just to differentiate which of the two pages is displayed. but i don't want to use stackview, as it's just part of the window


  • Moderators

    @Oussou

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.0
    
    Window {
    width: 600
    height: 600
    visible: true
    title: qsTr("Show rectangle")
    
    Column {
        id: column
        spacing: 50 // spacing between button and rectangle
        anchors {
            top: parent.top
            topMargin: 100
            horizontalCenter: parent.horizontalCenter
        }
        RowLayout{
            Button {
                id: button1
                text: "Show Rectangle Green"
                onClicked: {
                    pageLoader.source = "Page1.qml"
                    console.log("rectangle is visible!")
                }
            }
            Button {
                id: button2
                text: "Show Rectangle Red"
                onClicked: {
                    pageLoader.source = "Page2.qml"
                    console.log("rectangle is visible!")
                }
            }
        }
    
    
        Loader {
            id: pageLoader
            width: parent.width/1.5
            height: parent.height/1.5
        }
    }
    }
    


  • @J-Hilk thank you.


Log in to reply