I need to hide The QML Window when opening the another QML Window while clicking the button,I use Loader to open the another QML Window and its only hide the QML form components not QML Window,but I currently use window component to opens the QML Window
Here is my code :
Button {
id: button2
x: 19
y: 54
width: 114
height: 25
text: qsTr("DIFF-R")
style: ButtonStyle {
background: Rectangle {
implicitWidth: 10
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#555"
radius: 10
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ddd" : "#fff" }
GradientStop { position: 1 ; color: control.pressed ? "#8ad993" : "#528dc8" }
}
}
}
onClicked:{
/*pagesource.source="screen2.qml"
button1.visible="false"
button2.visible="false"
text1.visible="false"
text2.visible="false"
text3.visible="false"
text4.visible="false"
textField1.visible="false"
textField2.visible="false"
textField3.visible="false"
image1.visible="false"*/
var component = Qt.createComponent("screen2.qml")
var window = component.createObject(root)
window.show("screen2.qml") }
The above code only navigates the QML Window while the Button is clicked whereas I need to Hide the QML Window.
I see no code when you hide main window. Please, read this article since your code say nothing about the problem.
This is small example when main window hides when popup shows. May be it can be useful for you.
Window {
id: mainWindow
title: "Main window"
width: 600
height: 600
visible: true
flags: Qt.Dialog
modality: Qt.ApplicationModal
Component {
id: popupWindow
Window {
title: "Popup window"
width: 400
height: 400
visible: true
flags: Qt.Dialog
modality: Qt.ApplicationModal
Text {
anchors.centerIn: parent
text: "Close me to show main window"
}
}
}
Button {
anchors.centerIn: parent
text: "Show popup window"
onClicked: {
var window = popupWindow.createObject(mainWindow);
mainWindow.hide();
conn.target = window;
}
}
Connections {
id: conn
onVisibleChanged: {
mainWindow.show();
}
}
}
Related
I have a frameless qml window with a custom window decoration I created. And I am trying to assign a DragHandler to the window decoration with the target being the window. But I a specific error and only the custom window decoration is being dragged inside the window, the rest of the window remains as it is (not being dragged).
Also this window decoration contains the maximize button which I defined myself, it perfectly works, however the taskbar cannot be accessed while the window is maximized.
Can anyone help me see what is going wrong here and fix this?
Here is the error I received
file:///D:/QML tutorial/Tutorial_UI/Tutorial_UI.qml:92:21: Unable to assign Tutorial_UI_QMLTYPE_11 to QQuickItem
And here is my code (window and the titlebar)
Window {
id: window
width: 640
height: 480
visible: true
title: qsTr("QNotepad")
property int previousX
property int previousY
color: "#272727"
flags: Qt.Window | Qt.FramelessWindowHint
TitleBar {
id: title_bar
color: (window.active) ? "#1A212B" : "#272727"
width: 645
height: 50
//draggable widget
DragHandler{
id: draghandler
target: window
}
Text {
id: titlebar_text
text: "QNotePad"
color: "white"
x: 20
y: 10
}
}
And my code for the maximize button
ToolbarButton {
id: max_btn
text: "🗖"
text_color: "white"
onClicked: {
window.visibility === Window.Maximized ? (window.showNormal(), max_btn.text = "🗖", title_bar.width = 645, title_bar.height = 50, tool_bar.width = 640, tool_bar.height = 50, close_btn.x = 595, max_btn.x = 545, min_btn.x = 505, view.height = 600, view.width = container.width) : (window.showMaximized(), max_btn.text = "🗗" , title_bar.width = Screen.width, tool_bar.width = Screen.width, close_btn.x = (Screen.width-45), max_btn.x = (Screen.width-95), min_btn.x = (Screen.width-135), view.height = (Screen.height-40), view.width = Screen.width)
}
x: 545
y: 0
}
```
Instead of using DragHandler, consider using MouseArea with drag.target set. e.g.
TitleBar {
MouseArea {
anchors.fill: parent
drag.target: window
}
}
Here's an example of MouseArea with drag.target working in a mock application:
import QtQuick
import QtQuick.Controls
Page {
background: Rectangle { color: "#8ac" }
NotePadApp {
id: app1
x: 200
y: 200
}
NotePadApp {
id: app2
x: 400
y: 100
}
}
// NotePadApp.qml
import QtQuick
import QtQuick.Controls
Page {
id: page
width: 400
height: 400
header: TitleBar {
MouseArea {
anchors.fill: parent
drag.target: page
}
}
Frame {
anchors.fill: parent
}
}
// TitleBar.qml
import QtQuick
import QtQuick.Controls
Rectangle {
width: parent.width
height: titleText.height + 20
color: "#888"
property string title: "QNotePad"
Text {
id: titleText
x: 10
y: 10
text: title
color: "white"
}
}
You can Try it Online!
I want to use component in QtQuick, i have two qml files one is main.qml and the second button.qml, and iam using this example for their documentation, but when i run my code it is giving me error that QQmlApplicationEngine failed to load component
qrc:/bbb/main.qml:13:5: Button is not a type. also iam seeing some red error in the imported Button in main.qml.
main.qml
import QtQuick
Window {
id:root
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Button { // our Button component
id: button
x: 12; y: 12
text: "Start"
onClicked: {
status.text = "Button clicked!"
}
}
Text { // text changes when button was clicked
id: status
x: 12; y: 76
width: 116; height: 26
text: "waiting ..."
horizontalAlignment: Text.AlignHCenter
}
}
Button.qml
import QtQuick 2.0
Item {
Rectangle {
id: root
// export button properties
property alias text: label.text
signal clicked
width: 116; height: 26
color: "lightsteelblue"
border.color: "slategrey"
Text {
id: label
anchors.centerIn: parent
text: "Start"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.clicked()
}
}
}
}
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(u"qrc:/bbb/main.qml"_qs);
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
It seems your logging is somewhat truncated. Normally in this case (for me that is Qt5.11), that error is followed by the invalid property name 'text' that is visible in the designer, which is the real problem here.
You should keep in mind that signals and property are only visible/usable from the outside (so in your main.qml) if they are declared on the top most element in Button.qml. It seems you can simply remove the Item wrapping to make it work
Button.qml:
import QtQuick 2.0
Rectangle {
id: root
// export button properties
property alias text: label.text
signal clicked
width: 116; height: 26
color: "lightsteelblue"
border.color: "slategrey"
Text {
id: label
anchors.centerIn: parent
text: "Start"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.clicked()
}
}
}
I am trying to modify Gallery example. I want to add Button under TabView. So, I put TabView and Button into ColumnLayout, here is code:
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Window 2.0
Window {
visible: true
title: "settings"
width: 600
height: 400
ColumnLayout{
anchors.fill: parent
TabView {
anchors.right: parent.right
anchors.left: parent.left
Tab {
title: "Controls"
Controls { }
}
Tab {
title: "Itemviews"
Controls { }
}
Tab {
title: "Styles"
Controls { }
}
Tab {
title: "Layouts"
Controls { }
}
}
RowLayout{
anchors.right: parent.right
anchors.left: parent.left
Button{
text: "ok"
}
}
}
}
However, when I resize window okButton stands under tab controls. How should I fix code?
When you have defined a Layout, each element added has access to specific properties related to the layout itself. These properties are useful to position the element inside the space covered from the layout. Confront what is described here.
Hence, you should modify the ColumnLayout like this:
ColumnLayout {
anchors.fill: parent
TabView {
id:frame
enabled: enabledCheck.checked
tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
Layout.fillHeight: true // fill the available space vertically
Layout.fillWidth: true // fill the available space horizontally
Layout.row: 0 // item in the first row of the column
anchors.margins: Qt.platform.os === "osx" ? 12 : 2
Tab {
id: controlPage
title: "Controls"
Controls { }
}
Tab {
title: "Itemviews"
ModelView { }
}
Tab {
title: "Styles"
Styles { anchors.fill: parent }
}
Tab {
title: "Layouts"
Layouts { anchors.fill:parent }
}
}
Button {
text: "ok"
Layout.row: 1 // item in the second row of the column
Layout.alignment: Qt.AlignCenter // simple center the button in its spatial slot
}
}
You don't need a RowLayout for the button. It should be placed in the second row of the ColumnLayout you have defined, since it is a simple component. A sub-layout could be useful in case of multiple elements on the same row, e.g. two or more buttons.
Note also that anchoring is just used for the ColumnLayout to "stretch" and fit the window. All the other operations are executed via the layout properties. For general rules take a look at this other article.
How do i detect clicks outside Window {} in QML ?
Rectangle {
id: topLevel
height: 400; width: 400
Window {
id: windowObj
color: "blue"
height: 200; width: 200
onActiveChanged { console.trace(); visible = false; }
}
Component.onCompleted: windowObj.visible = true
}
Suppose I click on some part of topLevel outside windowObj.
onActiveChanged works on Windows but not on MAC.
{Using: QtQuick 2.1, QtQuick.Window 2.1, QML/Qt 5.2.0}
Put a MouseArea in your topLevel Rectangle and let the event pass through
Rectangle {
id: topLevel
MouseArea{
anchors.fill : topLevel
propagateComposedEvents : true
onClicked : console.log("clickoutside");
}
Window {
id: windowObj
color: "blue"
height: 200; width: 200
onActiveChanged { console.trace(); visible = false; }
}
}
I want a window with 3 push button but this push buttons should work like radio button!
so this is my code:
Rectangle {
id: sideButton
color: sideButtonMouseArea.containsMouse ? '#DDDDDD' : '#F4F4F4'
property string text: 'Button'
MouseArea {
id: sideButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
parent.color = '#4872E8'
sideButtonLabel.color = '#E2EBFC'
}
}
Text {
id: sideButtonLabel
text: sideButton.text
font.pixelSize: 20
font.family: 'Tahoma'
anchors.centerIn: sideButton
color: '#787878'
}
}
I use this rectangle instead button but it has a proble when click on other button for 2end time
how could i fix it?
This code works for me:
MyRadioGroup.qml
import QtQuick 1.0
QtObject {
property Item selected : null
}
MyRadioButton.qml
import QtQuick 1.0
Rectangle {
id: sideButton
property string text: 'Button'
property MyRadioGroup radioGroup
color: radioGroup.selected === sideButton ? '#E2EBFC' :
(sideButtonMouseArea.containsMouse ? '#DDDDDD' : '#F4F4F4')
MouseArea {
id: sideButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: sideButton.radioGroup.selected = sideButton
}
Text {
id: sideButtonLabel
text: sideButton.text
font.pixelSize: 20
font.family: 'Tahoma'
anchors.centerIn: sideButton
color: radioGroup.selected === sideButton ? '#E2EBFC' : '#787878'
}
}
main.qml
import QtQuick 1.0
Rectangle {
height: 600
width: 600
MyRadioGroup {
id: radioGroup1
}
Column {
anchors.fill: parent
MyRadioButton {
anchors { left: parent.left; right: parent.right }
text: "Button 1"
radioGroup: radioGroup1
height: 100
}
MyRadioButton {
anchors { left: parent.left; right: parent.right }
text: "Button 2"
radioGroup: radioGroup1
height: 100
}
MyRadioButton {
anchors { left: parent.left; right: parent.right }
text: "Button 3"
radioGroup: radioGroup1
height: 100
}
MyRadioButton {
anchors { left: parent.left; right: parent.right }
text: "Button 4"
radioGroup: radioGroup1
height: 100
}
}
}
What it does: I've created container MyRadioGroup to hold currently selected item. Then, I declaratively bind its selected property with color property of my MyRadioButton-s, so it will update on every selected change.
Having that said, please check, that you component provider doesn't already contain some stuff like this --- maybe you are reinventing the wheel.