click button qml

Oussou

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"

}

Markkyboy

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"
        }
    }
}

Oussou

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

Markkyboy

Post your current code.

Oussou

@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

Markkyboy

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
            }
        }
    }
}

Oussou

@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

J.Hilk

@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
    }
}
}

Oussou

@J-Hilk thank you.