QML - How to have a popup that doesn't get clipped - c++

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.

Related

C++ [QT 5.15.2] : virtual keyboard shift button is disabled until I click on my textField

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.

QT Text.WordWrap not working inside ColumnLayout

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
}
}
}

TextArea cursor shape overlapping other items

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

how to set the QML application window transparent by Qt 5.6?

I am new in Qt & QML, now I set a window and want to set it transparent, user can see my desktop cross my application.
I try to use WA_TranslucentBackground and opacity, however it doesn't work.
Here is my QML code, it's very simple:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: Screen.width
height: Screen.height
title: qsTr("Input")
flags: Qt.WA_TranslucentBackground | Qt.FramelessWindowHint
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
}
Window {
visible: true
color: "transparent"
//flags: Qt.Widget | Qt.FramelessWindowHint
}
Uncomment flags if you want transparent window without frame

Qml for ios application is too slow

I am developing an application with Qt and qml and I am building it for OSX, iOS and Android. The application contains a StackView which has only three pages. In the second page I have a five MenuItems and five Dialogs.
While this very simple application has an excellent performance when runs on OSX and Android, it delays up to 3-4 seconds to show the second page on iOS.
I have already tried "Qml Profiler" and I have found out that the delay happens during the creation of the qml file that describes the second page.
I have also tried "Qt Quick Compiler" (Commercial Qt) with no significant difference.
main.qml
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
ApplicationWindow {
id: app
title: "MyApp"
width: 1024
height: 768
visible: true
StackView {
id: stackView
anchors.fill: parent
initialItem: firstPage
}
Component {
id:firstPage
FirstPage {
}
}
}
firstPage.qml
import QtQuick 2.3
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
Item {
id:firstPage
signal collectionClicked(string name)
focus: true
objectName: "firstPage"
Rectangle {
anchors.fill: parent
color: "blue"
}
MouseArea {
anchors.fill: parent
onClicked: {
stackView.push(Qt.resolvedUrl("SecondPage.qml"))
}
}
}
SecondPage.qml
import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
Item {
id: itemsPage
signal itemClicked()
Rectangle {
id: myRectangle
anchors.fill: parent
color: "red"
Dialog {
id: dialog1
height: 200
width: 300
//onAccepted: ;
}
Dialog {
id: dialog2
height: 200
width: 300
//onAccepted: ;
}
Dialog {
id: dialog3
height: 200
width: 300
//onAccepted: ;
}
Dialog {
id: dialog4
height: 200
width: 300
//onAccepted: ;
}
Dialog {
id: dialog5
height: 200
width: 300
//onAccepted: ;
}
Menu {
id: myMenu
title: "Menu"
MenuItem {
text: "Test"
//onTriggered: ;
}
MenuItem {
text: "Test"
//onTriggered: ;
}
MenuItem {
text: "Test"
//onTriggered: ;
}
MenuItem {
text: "Test"
//onTriggered: ;
}
MenuItem {
text: "Test"
//onTriggered: ;
}
}
}
MouseArea {
anchors.fill: parent
onClicked: stackView.push(Qt.resolvedUrl("ThirdPage.qml"));
}
}
ThirdPage.qml
import QtQuick 2.0
Item {
Rectangle {
anchors.fill: parent
color: "green"
Text {
text: "third page"
}
}
}
I have tried for such a long to find a solution. And I think that it is impossible that there is nobody that has ever tried to make a simple qml application for iOS and faced what I have faced.
Thank you,
Michael