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 youbelow 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
-
@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.0Window {
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 -
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
-
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 } } }