I have a TextArea and popup or another item which overlaps it. But when I pointing at popup, cursor shape doesn't change. I need the cursor to become default when I pointing to overlapped items.
Code:
import QtQuick 2.7
import QtQuick.Controls 2.1
ApplicationWindow {
id: root
visible: true
width: 800
height: 600
Component.onCompleted: pop.open()
TextArea {
width: 800
height: 600
}
Popup {
id: pop
Rectangle {
color: "red"
width: 100
height: 100
}
MouseArea {
anchors.fill: parent
}
}
}
The TextArea contains a MouseArea that sets a different cursor shape.
The cursor shape is always defined by the top-most MouseArea. Therefore the solution is, to add a MouseArea to the overlapping Item to reset the cursor shape for this area.
import QtQuick 2.7
import QtQuick.Controls 1.4
ApplicationWindow {
id: root
visible: true
width: 800
height: 600
TextArea {
width: 800
height: 600
}
Rectangle {
color: 'red'
width: 100
height: 100
x: 100
y: 50
MouseArea { // This resets the cursor shape, if the cursor hovers over the Rectangle
anchors.fill: parent
}
}
}
The issue has been fixed in Qt 5.9.
Thanks to jpnurmi
Related
I'm developping an app using QT 5.15 LTS (5.15.2). I have the following QML item that I use to handle virtual keyboard interactions :
//InputScreen.qml
import QtQuick 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import QtQuick.VirtualKeyboard 2.3
Rectangle
{
id: inputScreen
property var target: undefined
width: app.width
height: app.height
color: "#44000000"
z: 200
onVisibleChanged:
{
if (inputScreen.visible == true)
{
fld.text = target.text;
inputPanel.forceActiveFocus();
fld.forceActiveFocus();
fld.clicked(); //Tried to force a click here. Explanation below
}
}
Rectangle
{
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
height: 40
width: 600
z: 201
TextField
{
id: fld
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: 400
height: 40
font.pixelSize: 24
focus: true
}
Button
{
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: 200
height: 40
font.pixelSize: 24
text: "Valider"
onClicked:
{
if (target != undefined)
{
target.text = fld.text;
inputScreen.visible = false;
}
}
}
}
InputPanel
{
id: inputPanel
height: 400
width: app.width - 40
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
focus: true
z: 201
}
MouseArea
{
anchors.fill: parent
onClicked:
{
target.text = fld.text;
inputScreen.visible = false;
}
}
}
When my item becomes visible, the textField gets the focus correctly and I can start typing through the InputPanel virtual keyboard. There's however one single problem : the shift key does not work !
In order to make that shift key enable itself, I need to click on the TextField, which beats the purpose of forcing the active focus on it to begin with.
Is there any way to fix that problem ? Or at the very least, is there any kind of workaround I can use to enable that shift key ?
I have already tried to force a click inside my TextField (as seen in the code above), but it didn't work.
For context : here's the content of main.qml as well, in order to give out a working example :
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.VirtualKeyboard 2.3
Window
{
id: app
visible: true
width: 640
height: 480
title: qsTr("Example")
InputScreen
{
id: inputScreen
visible: false
}
Rectangle
{
id: rect
height: parent.height * 0.8
width: parent.width * 0.8
anchors.centerIn: parent
border.color: "#FF0000"
z: 1
TextField
{
id: myField
anchors.centerIn: parent
width: 200
height: 24
MouseArea
{
anchors.fill: parent
onClicked:
{
inputScreen.target = myField;
inputScreen.visible = true;
}
}
}
}
}
I finally managed to find a trick that enabled that shift key without requiring to click on my already focused TextField, and it's actually very simple.
I simply added the following line in the onClicked event of the MouseArea inside the "myField" TextField :
MouseArea
{
anchors.fill: parent
onClicked:
{
parent.focus = true; //This line solved the issue !
//...
}
}
I have no idea why, but somehow this was enough to actually unlock the shift key from my InputPanel virtual keyboard without requiring me to click a second time on the TextField from my InputScreen item. I suppose it has probably something to do with the fact that my MouseArea is hijacking the focus of the "myField" TextField, which triggers some sort of odd behaviour on the InputPanel item despite having another TextField item focused.
In any case, I hope this will help someone.
I need to have a Popup that stays visible outside the bounds of the main window.
I couldn't find anything in the Qt documentation.
This is the code:
import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 400
height: 400
visible: true
Button {
text: "Open"
onClicked: popup.open()
}
Popup {
id: popup
x: 100
y: 100
width: 300
height: 400
modal: true
focus: true
dim: false
contentItem: Rectangle
{
anchors.fill: parent
color: "red"
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
}
}
This is the output of this:
I want the red to go beyond the window borders.
Something like this:
I'd appreciate the help!
Note: using a Dialog is no good for me.
Popups are not proper windows, so you'd need to create a new window like Michael mentioned:
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
id: mainWindow
width: 640
height: 480
visible: true
ApplicationWindow {
id: redWindow
x: mainWindow.x + mainWindow.width / 2
y: mainWindow.y + mainWindow.height / 2
width: 300
height: 400
flags: Qt.Popup | Qt.Dialog
visible: true
Rectangle {
color: "red"
anchors.fill: parent
}
}
}
There is a suggestion to make Popups proper windows here.
I am developing application using QT QML. I am facing one strange issue with QML. I want to divide and display long text using QML. I am using QT Text element to perform this task. I want to place this Text inside QT Columnlayout with other UI elements. I am not able to display long text as Multi line text. Please help me to solve this problem. Here is my QML code.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "#18d28a"
ColumnLayout{
id: base_coloumn_layout
width: parent.width
Layout.margins: 10
Text {
id: application_instruction
width: 640
text: qsTr("xyxvx dgdgdh dhdgdd dhdgdhhgd dhhhdgd dhdgdg dhdgdh djhddh djddgdhgdh dhdgdhgdgh dhgdgdhj dhdgdghdg dhjdgdgd.")
color: "#000000"
font.pointSize: 12
wrapMode: Text.WordWrap
}
}
}
Same element is working properly when placed outside ColoumnLayout. I am able to display Text as multi line with code bellow. I want same code should work as Child of ColoumnLayoutas there will be few more elements inside ColoumnLayout
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "#18d28a"
Text {
id: application_instruction
width: 640
text: qsTr("xyxvx dgdgdh dhdgdd dhdgdhhgd dhhhdgd dhdgdg dhdgdh djhddh djddgdhgdh dhdgdhgdgh dhgdgdhj dhdgdghdg dhjdgdgd.")
color: "#000000"
font.pointSize: 12
wrapMode: Text.WordWrap
}
}
What is wrong with ColoumnLayout. Am i missing any property value to set. Please help
Inside a ColumnLayout, width properties are ignored.
Instead set Layout.preferredWidth or Layout.maximumWidth attached properties of the Text element.
If you want an item to fill the width of the ColumnLayout, you can set the Layout.fillWidth attached property to true.
From the Answer given by Mark, we can change qml as given bellow and we can display multi line text.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
id: application_window
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "#18d28a"
ColumnLayout {
id: base_coloumn_layout
width: parent.width
Layout.margins: 10
Text {
id: application_instruction
width: application_window.width
Layout.preferredWidth: application_window.width
text: qsTr("xyxvx dgdgdh dhdgdd dhdgdhhgd dhhhdgd dhdgdg dhdgdh djhddh djddgdhgdh dhdgdhgdgh dhgdgdhj dhdgdghdg dhjdgdgd.")
color: "#000000"
font.pointSize: 12
wrapMode: Text.WordWrap
}
}
}
I`m try to get control under cursor. At my example i can get only red rectangle, but i need get other also.
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: mainWindow
title: qsTr("Hello World")
width: 640
height: 480
Item {
id: parentPanel
anchors.fill: parent
MouseArea {
anchors.fill: parent
hoverEnabled: true
onMouseXChanged: moveMouse()
onMouseYChanged: moveMouse()
function moveMouse()
{
currentControl.text = parentPanel.childAt(mouseX, mouseY).color ? parentPanel.childAt(mouseX, mouseY).color : "not colored"
}
}
Rectangle {
id: redRect
anchors {
fill: parent
leftMargin: 50
bottomMargin: 50
}
color: "red"
Rectangle {
id: yellowRect
anchors {
fill: parent
leftMargin: 50
bottomMargin: 50
}
color: "yellow"
Rectangle {
id: greenRect
anchors {
fill: parent
leftMargin: 50
bottomMargin: 50
}
color: "green"
}
}
}
Text {
id: currentControl
anchors.left: parent.left
anchors.bottom: parent.bottom
}
}
}
I have screenshot from running program. Green rect inside yellow, yellow inside red. I need get control ref when mouse cursor over control.
I'm not familiar with QML, so I don't know the exact syntax for this, but it seems like you want to loop until you find the inner-most control and get the color of that. Here's some C++ish pseudo-code
auto control = parentPanel.childAt(mouseX, mouseY);
while (control)
{
currentControl.text = control.color ? control.color : "not colored";
control = control.childAt(mouseX, mouseY);
}
Of course, this code assumes that the X and Y passed are absolute, not relative. If the are relative, you would need to decrement them by the location of control in each consecutive loop.
I have a main qml file which contains top item is a rectangle, middle item is a loader which loads different qml files and bottom item is some text.
Based on loader item i want bottom item should adjust, i tried to use anchors but some how it's not working could some one explain me how to do this.
Here is my code:
main.qml
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
Rectangle{
id: toprect
width: 100
height: 100
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
}
Loader{
id: middlerect
anchors.top: toprect.bottom
source: "qrc:/new.qml"
}
Rectangle{
id: belowrect
anchors.top: middlerect.bottom
Text{
text: "Bottom"
}
}
}
}
new.qml
import QtQuick 2.0
import QtQuick.Controls 1.2
Item {
id: newid
Column{
spacing: 10
Rectangle{
width: 100
height: 50
color: "lightblue"
}
Rectangle{
width: 100
height: 50
color: "lightgreen"
}
}
}
Issue:
Bottom item is overlapping on middle item
you have 2 problems in your code:
you should give a height and width to the belowrect
you should give a height and width to your new.qml object
try this:
main.qml
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
anchors.fill: parent
Rectangle{
id: toprect
width: 100
height: 100
color: "green"
anchors.horizontalCenter: parent.horizontalCenter
}
Loader{
id: middlerect
anchors.top: toprect.bottom
source: "qrc:/new.qml"
}
Rectangle{
id: belowrect
color:"yellow"
width: childrenRect.width
height: childrenRect.height
anchors.top: middlerect.bottom
Text{
id:text
text: "Bottom"
}
}
}
}
new.qml
import QtQuick 2.0
import QtQuick.Controls 1.2
Item {
id: newid
width: childrenRect.width
height: childrenRect.height
Column{
spacing: 10
Rectangle{
width: 100
height: 50
color: "lightblue"
}
Rectangle{
width: 100
height: 50
color: "lightgreen"
}
}
}