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; }
}
}
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!
Is there a QML layout or some configuration that will automatically wrap QML items to the next row if the width of the next element exceeds the width of the specified layout?
When I use a QML GridLayout, the items just go off the edge of the window and are clipped:
GridLayout {
id: header_focused_container;
width: parent.width;
anchors.margins: 20;
Text {
text: "header_focused_container.width=" +
header_focused_container.width +
" and my width is =" + width
}
Rectangle { height:20; width:250; color: "red" }
Rectangle { height:20; width:250; color: "blue" }
Rectangle { height:20; width:250; color: "green" }
}
When I look at Qt's documentation page labeled "Scalability" I see very manual scaling going on. Basically, they're suggesting that I need compute the needed columns.
Is there some sort of layout type or configuration that will do auto-wrapping of the items?
You can use Flow:
import QtQuick 2.5
import QtQuick.Window 2.0
Window {
visible: true
width: 400
height: 200
Flow {
id: header_focused_container
anchors.fill: parent
Text {
text: "blah"
}
Rectangle { height:20; width:250; color: "red" }
Rectangle { height:20; width:250; color: "blue" }
Rectangle { height:20; width:250; color: "green" }
}
}
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();
}
}
}
I'm trying to understand the functionality of Behavior by animating a small Rectangle when it's property changes.
Consider the following example:
import QtQuick 2.4
import QtQuick.Controls 1.2
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
property int xval: 0
Behavior on xval {
NumberAnimation {
target: rect
property: "x"
to: rect.xval
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.xval=250 }
}
}
Here I'm trying to animate the x property of the Item rect on Button Click. But it doesnot animate. Now if you replace
to: rect.xval
with
to: 400
The Rectangle animates as expected on Button Click. All I want to do is to animate the Rectangle using the value set by the user. Am I missing something ?
You don't need a extra property to animate a property.
Behavior on foo will animate foo whenever it changes its value and make it the implicit property of inner Animations.
Your code can simply be
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
Behavior on x {
NumberAnimation {
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.x=250 }
}
}
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.