In the example below the Button component doesn't work because Drawer dragMargin overlap it.
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
title: qsTr("Drawer example")
Drawer {
id: menu
dragMargin: 60
width: window.width * 0.85
height: window.height
background: Rectangle {
color: "blue"
}
}
Button {
id: log
text: "Click me!"
anchors.top: parent.top
anchors.left: parent.left
onClicked: {
console.log("Clicked!");
}
}
}
Is there a way to fix this issue? I tried to change z properties but it doesn't work.
I found this link on the Qt forum. It seems that the problem described is an open issue to be resolved by Qt.
Related
What is the best way to handle theme changes in QML?
I noticed some controls like Switch And ApplicationWindow do this automatically, but others like Text and Rectangle just don't!
Is it at all possible to avoid having to check which theme is currently set and then each time set the color accordingly? (color: theme.position < 1 ? "black" : "white")
main.qml
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Controls.Material 2.13
//ok: the background color changes automatically when the theme changes
ApplicationWindow {
id: root
visible: true
width: 1366
height: 768
title: qsTr("Theme")
Material.theme: theme.position < 1 ? Material.Light : Material.Dark
//ok: the text color changes automatically when the theme changes
Switch {
id: theme
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10
text: "Dark theme"
checked: false
}
//not ok: the background is always white
Rectangle {
anchors.centerIn: parent
width: 200
height: width
//not ok: the color is always black
Text {
anchors.centerIn: parent
text: "some text"
font.pixelSize: 40
}
}
}
qtquickcontrols2.conf
[Controls]
Style=Material
[Material]
Theme=Dark
Accent=Orange
Primary=BlueGrey
Text and Rectangle are primitives from Qt Quick, which means that they don't understand Qt Quick Controls' Material style colour propagation. You can use Label and Frame instead:
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Controls.Material 2.13
ApplicationWindow {
id: root
visible: true
width: 1366
height: 768
title: qsTr("Theme")
Material.theme: theme.position < 1 ? Material.Light : Material.Dark
Switch {
id: theme
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10
text: "Dark theme"
checked: false
}
Frame {
anchors.centerIn: parent
width: 200
height: width
Label {
anchors.centerIn: parent
text: "some text"
font.pixelSize: 40
}
}
}
Note that Frame will consume mouse events, so if you don't want that, you'll need to use e.g. Control, and handle the colours yourself using the Material style's attached properties:
Control {
anchors.centerIn: parent
width: 200
height: width
background: Rectangle {
color: parent.Material.background
border.color: parent.Material.foreground
}
Label {
anchors.centerIn: parent
text: "some text"
font.pixelSize: 40
}
}
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextField {
id:textField
width: 130
height: 50
}
Button {
anchors.right: parent.right
text: "lose Focus"
}
}
why textField don't lose Focus when Button Click?
How to achieve click an area outside the TextField to make the TextField lose focus?
The simplest way using your existing code is to force active focus on another item when the button is clicked:
Button {
anchors.right: parent.right
text: "lose Focus"
onClicked: forceActiveFocus()
}
To make the TextField lose focus when clicking the area outside of it, you can do something similar with MouseArea:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MouseArea {
anchors.fill: parent
onClicked: forceActiveFocus()
}
TextField {
id: textField
width: 130
height: 50
}
}
This item needs to be below (i.e have a lower Z value than) other items in the scene. You can also make it a parent of the other items to achieve this:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MouseArea {
anchors.fill: parent
onClicked: forceActiveFocus()
TextField {
id: textField
width: 130
height: 50
}
}
}
If you're using Qt Quick Controls 2, you can use the focusPolicy property on e.g. Pane:
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Pane {
anchors.fill: parent
focusPolicy: Qt.ClickFocus
}
TextField {
id: textField
width: 130
height: 50
}
}
I have the following QML layout of the main application window. I need to create shadow for borderless window, that's why inner rectangle is a bit smaller than the application border (I found this solution on the StackOverflow before). The problem is when a new item is pushed to the nested StackView, it moves from the outside of the inner rectangle. How should I fix it?
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import org.b2soft.qml 1.0
ApplicationWindow {
id: window
visible: true
width: 800
height: 600
title: qsTr("Test")
color: "#00000000"
flags: Qt.FramelessWindowHint | Qt.Window
Rectangle {
id: rect
width: 700
height: 500
anchors.centerIn: parent
Column {
id: column
anchors.fill: parent
Row {
id: topbar
anchors.left: parent.left
anchors.right: parent.right
height: 24
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width
color: "#37373a"
}
}
StackView {
id: rootStackView
anchors.left: parent.left
anchors.right: parent.right
height: parent.height - topbar.height
initialItem: Qt.resolvedUrl("login.qml")
}
Connections {
target: QMLWrapper
onLoginCompleted: rootStackView.push(Qt.resolvedUrl("main_stack.qml"))
}
}
}
DropShadow {
anchors.fill: rect
radius: 40
samples: 32
verticalOffset: 14
source: rect
color: "#40000000"
}
}
Below is the GIF with the issue:
I'd go on a limb and assume that's the default intended behavior. QML elements do not clip by default, out of concern it might be a heavy operation.
And the stack view is usually contained inside the application window, so this issue would not be prominent.
But yours is nested into a smaller element, leaving room for the artifact to manifest.
All you have to do is set clip: true for rect.
I am not able to click on the VirtualKeyboard if the TextField is in the dialog and Application Window is the base class.
Following is the code:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.VirtualKeyboard 2.2
ApplicationWindow {
id:appwindow
visible: true
width: 600
height: 500
title: qsTr("Test")
Button{
id:button
text:qsTr("Open")
onClicked:{
dialog.visible=true
dialog.open()
}
}
Dialog{
id:dialog
width:200
height:300
visible:false
TextField {
id: textfield
color: "#2B2C2E"
}
}
InputPanel {
id: inputPanel
z: 89
anchors.bottom:parent.bottom
anchors.left: parent.left
anchors.right: parent.right
visible: Qt.inputMethod.visible
}
}
There will be no issues if I change ApplicationWindow to Window, Is that a QT Bug in v5.9.1?
ApplicationWindow offers a nice extra layer overlay to which you may reparent everything that shall be above the rest of the content - just the right place for your VirtualKeyboard
InputPanel {
id: inputPanel
parent: ApplicationWindow.overlay // <-- This will do the trick
anchors.bottom:parent.bottom
anchors.left: parent.left
anchors.right: parent.right
visible: Qt.inputMethod.visible
}
I have a problem using the style property to change the text color of a scrollable TextArea.
I also added the included modules from the .pro file:
QT += qml quick core quickcontrols2
This is what my .qml file looks like:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Material 2.0
import QtGraphicalEffects 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Test")
Page {
width: parent.width
height: parent.height
background: Rectangle {
color: "#000000"
width: parent.width
height: parent.height
}
Flickable {
id: flickable
anchors.bottom: parent.bottom
width: parent.width-50
flickableDirection: Flickable.VerticalFlick
height: 200
TextArea.flickable: TextArea {
id: pane1
text: "This is some text"
font.bold: false
font.pointSize: 10
wrapMode: Text.WordWrap
clip: true
style: TextAreaStyle {
textColor: "#4F4F4F"
}
background: Rectangle {
color: "#FFFFFF"
width: parent.width
height: parent.height
}
}
ScrollBar.vertical: ScrollBar { }
}
}
}
The Error message I get when running this example:
QQmlApplicationEngine failed to load component
qrc:/main.qml:38 Cannot assign to non-existent property "style"
I guess I am missing some dependency, but couldn't find anything in the documentation pointing me into the right direction.
Posting #BaCaRoZzo's comment as a community answer.
style property is not available in controls 2. Styling is inlined in the control. See here.
You can also remove import QtQuick.Controls.Styles 1.4 since it is necessary to styling controls 1.x, which you didn't import.