Im trying to add a Minimized button in my app.
For now I've some problem just in Mac Os.
I tested in Linux and Win and I don't have problem.
Any ideia?
Rectangle {
property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse
anchors.top: parent.top
anchors.bottom: parent.bottom
width: height
color: containsMouse ? "#3665B3" : "#000000"
Image {
anchors.centerIn: parent
source: "../images/minimizeIcon.png"
}
MouseArea {
id: minimizeArea
anchors.fill: parent
onClicked: {
// I can see this in Mac Os but don't work
console.log("its work")
appWindow.visibility = Window.Minimized
}
}
}
appWindow is my ApplicationWindow {} // has all my content
There is the link do see the ApplicationWindow: https://github.com/LetheanMovement/lethean-gui/blob/master/main.qml
I tried to use the same code to FullScreen and works well!
appWindow.visibility = Window.FullScreen
The interesting is: If I'm in a FullScreen mode my Windows.Minimized has the same effect as the Windows.Windowed
Im following this Doc: https://doc.qt.io/qt-5/qml-qtquick-window-window.html
Try appWindow.visibility = Window.Windowed before:
onClicked: {
// I can see this in Mac Os but don't work
console.log("its work")
appWindow.visibility = Window.Windowed
appWindow.visibility = Window.Minimized
}
Works on ArchLinux.
Related
i want to create metro style titlebar (some thing like "mahapps.metro") for qml application with sticky edges and custom buttons and backgrounds , i already created some thing like this :
import QtQuick.Controls.Universal 2.12
ApplicationWindow{
id: window
width: Screen.width * 5/6
height: Screen.height * 5/6
flags:Qt.Window | Qt.CustomizeWindowHint
menuBar : Rectangle{
width: parent.width
height: 35
color: Universal.color(Universal.Emerald)
Row{
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 5
layoutDirection: Qt.RightToLeft
CustomButton{
//close
}
CustomButton{
//maximize
}
CustomButton{
//minimize
}
}
MouseArea{
//deal with dragging
anchors.fill: parent
property variant clickPos: "1,1"
onPressed: {
if(window.visibility != 4 && window.visibility != 5)
clickPos = Qt.point(mouse.x,mouse.y)
}
onDoubleClicked: {
var item = window.Maximized;
if(window.visibility != 4 && window.visibility != 5){
window.showMaximized()
}
else{
window.showNormal()
}
}
onPositionChanged: {
if(window.visibility != 4 && window.visibility != 5){
var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
window.x += delta.x;
window.y += delta.y;
}
}
}
}
}
i have some questions :
how can i implement sticky edges in QML or QT ?
is there any library out there which already did this?
can i make a custom title bar meets my requirements with QTitleBar?
is there any open source application out there with custom title bar?
do material design has any style for windows , at least helps me in making it?
I have a program in Qt and a WebEngineView in it .I want to when my user clicked on a inputbox in webEngine a keyboard have been loaded and the inputbox get its contents from my keyboard (i wrote my own keyboard) but i can't do it .i try codes in bellow but don't work
WebEngineView {
anchors.fill:parent
id:webEng
url: "https://example.com"
visible: true
MouseArea {
id : mousearea
anchors.fill: parent
onClicked: {
mykeyboard.visible=true;
}
}
}
This is not a complete answer but this code could help:
import QtQuick 2.10
import QtWebView 1.1
import QtQuick.Controls 1.4
import QtWebEngine 1.7
Item {
width: 1280
height: 720
WebView { // or WebEngineView {
id: webview
width: 1280
height: 720
url: "http://google.com"
visible: true
onLoadingChanged: {
if (loadRequest.status === WebView.LoadSucceededStatus) {
console.log("Loaded!!")
webview.runJavaScript('
var input = document.getElementById("lst-ib");
input.addEventListener("click", function() {
alert("Clicked!");
});
'
)
}
}
}
Rectangle {
id: myDummyKeyboard
anchors.bottom: parent.bottom
width: parent.width
height: 100
color: "gray"
visible: true
border.width: 20
Button {
anchors.centerIn: parent
text: "Dummy"
onClicked: {
webview.runJavaScript('document.getElementById("lst-ib").value += "' + text + '"');
}
}
}
}
The part in the WebView (or WebEnginView) allows to display an alert when the input is clicked. But, something is missing, to link it to a QML handler. The solution is maybe to use WebChannel or maybe WebEngineScript as said by #folibis in the comments.
The part defined by myDummyKeyboard allows to add a string into the input when the user is clicking the button in the rectangle (fake keyboard).
I have a Qt app which runs on iOS and OSX using Qt 5.10 commercial version. I have a QML item which hosts an image. I am trying to pan the QML item when user's finger drags on it OR mouse is dragged.
Following is somewhat I am trying to make my QML item pannable:
Code:
MyQmlItem {
id: my_qml_item
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
onXChanged: {
if (my_qml_item_mouse_area.drag.active) {
console.log("x = " + x)
my_qml_item.x = // what to set x here to move my_qml_item wrt finger or mouse pressed movement
}
}
onYChanged: {
if (my_qml_item_mouse_area.drag.active) {
console.log("y = " + y)
my_qml_item.y = // what to set y here to move my_qml_item wrt finger or mouse pressed movement
}
}
MouseArea {
id: my_qml_item_mouse_area
anchors.fill: parent
drag {
id: drag_area
target: my_qml_item
axis: Drag.XandYAxis
}
}
}
I understand that I have to update the x and y position of MyQmlItem when onXChanged and onYChanged is active and x y are getting updated. But I am struggling to figure how I should re-calculate the new my_qml_item.x and my_qml_item.y
Question:
I am getting x and y updates on onXChanged and onYChanged as well. The basic question is, how to calculate plus continuously update my_qml_item.x and my_qml_item.y.
Are there any good examples of Qt/QML for panning or dragging a QML item?
Is there some way to replicate the following anchors by only setting default x and y? Because, it falls in direct conflict with dragging the QML component
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
Anchors should not be used if you wish to drag as it links some part of the geometry of the items.
In your case, you only need to establish the specific positions at certain times, such as when the application starts, so instead of setting the anchors you could use the properties "x", "y", "width" and "height" .
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
ApplicationWindow {
id: app
visible: true
visibility: "FullScreen"
title: qsTr("Scroll")
function resetPosition(){
item.x = Screen.orientation === Qt.PortraitOrientation ? (Screen.width - item.width)/2 : (Screen.height - item.height)/2
item.y = 0
}
Image {
id: item
source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
onStatusChanged: {
if(status == Image.Ready)
resetPosition()
}
MouseArea{
anchors.fill: parent
drag.target: item
drag.axis: Drag.XAndYAxis
onClicked: resetPosition()
}
}
property bool isPortrait: Screen.primaryOrientation === Qt.PortraitOrientation || Screen.primaryOrientation === Qt.InvertedPortraitOrientation
property bool isLandscape: Screen.primaryOrientation === Qt.LandscapeOrientation || Screen.primaryOrientation === Qt.InvertedLandscapeOrientation
onIsPortraitChanged: resetPosition()
onIsLandscapeChanged: resetPosition()
}
In Qt Creator I have a QML Window with a "more" Button at the bottom. If one clicks the botton the window expands or decrease, depending on the state.
This works fine with Kubuntu, but with Windows 10 the button stays in the middle, and only the lower button works an next click.
Sceenshoots:
Kubuntu 15.10
~$ qmake --version
QMake version 3.0
Using Qt version 5.4.2 in /usr/lib/x86_64-linux-gnu
Windows 10
C:\Qt\Qt5.5.1\5.5\mingw492_32\bin>qmake.exe --version
QMake version 3.0
Using Qt version 5.5.1 in C:/Qt/Qt5.5.1/5.5/mingw492_32/lib
Minimal Working Example:
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
id: main
visible: true
width: 200
height: 100
maximumHeight: 200
maximumWidth: 200
Rectangle {
id: rectangleMoreButton
height: 40
width: parent.width
color: "#4a4a4a"
border.color: "#ffffff"
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
Text {
id: textMoreButton
text: "more"
color: "#ffffff"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
anchors.fill: parent
onClicked: {
rectangleMoreButton.state == 'more' ? rectangleMoreButton.state = "" : rectangleMoreButton.state = 'more'
}
}
states: [
State {
name: "more"
onCompleted: {
textMoreButton.text = "less"
main.height = 200
}
},
State {
name: ""
onCompleted: {
textMoreButton.text = "more"
main.height = 100
}
}
]
}
}
Question:
How could I update the position the "more"/"less" Rectangle button after changing the height of main Window in QML to solve this problem? Is there a way for a force update or repainting the window if the height changes?
Edit for Workaround:
I found a Workaround to fix the hanging Button in Windows: Add a timer, which runs only once with a millisecond time offset after the resizing of the window:
Timer {
id: timerUpdateMoreButton
interval: 1
onTriggered: {
rectangleMoreButton.y = main.y
timerUpdateMoreButton.running = false
}
}
and for the "more" state, the timer has to activated:
timerUpdateMoreButton.running = true
I have a MouseArea that I want to start off centered and then have an absolute position once the up/down/left/right keys are pressed. My problem is that I don't know how to clear the anchor on the MouseArea so that I can specify an absolute position:
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
id: screen
width: 360
height: 360
visible: true
Rectangle {
anchors.fill: parent
states: [
State {
name: "moved"
AnchorChanges {
target: mouseArea
anchors.bottom: undefined
anchors.left: undefined
anchors.right: undefined
anchors.top: undefined
}
}
]
MouseArea {
id: mouseArea
anchors.centerIn: parent
width: 250
height: 250
focus: true
onClicked: console.log("clicked!")
onPositionChanged: console.log("position changed!")
function moveMouseArea(x, y) {
mouseArea.x += x;
mouseArea.y += y;
mouseArea.state = "moved";
mouseAreaPosText.text = 'Mouse area was moved... new pos: '
+ mouseArea.x + ', ' + mouseArea.y;
}
Keys.onPressed: {
if (event.key === Qt.Key_Up)
moveMouseArea(0, -1);
if (event.key === Qt.Key_Down)
moveMouseArea(0, 1);
if (event.key === Qt.Key_Left)
moveMouseArea(-1, 0);
if (event.key === Qt.Key_Right)
moveMouseArea(1, 0);
}
Rectangle {
anchors.fill: parent
border.width: 2
border.color: "black"
color: "transparent"
}
Text {
id: mouseAreaPosText
anchors.centerIn: parent
}
}
}
}
At first I just tried setting mouseArea.anchors to undefined but got an error about anchors being a read-only property. I then discovered AnchorChanges, but I can't find a way to remove/clear the anchor; setting anchors.bottom etc. to undefined doesn't work.
According to docs, setting an anchor attribute to undefined should work. I don't quite get why AnchorChanges did not allow to set anchors.centerIn, but you can workaround it in your moveMouseArea function:
function moveMouseArea(x, y) {
mouseArea.anchors.centerIn = undefined; // <-- reset anchor before state change
mouseArea.pos.x += x;
mouseArea.pos.y += y;
mouseArea.state = "moved";
mouseAreaPosText.text = 'Mouse area was moved... new pos: '
+ mouseArea.pos.x + ', ' + mouseArea.pos.y;
}
Thanks for your help guys. I have found that setting undefined within a state works (if by works you mean only that it doesn't give errors), however once the element moves to yet another state, the anchors magically (and very frustratingly) return. This happens EVEN if you set all anchors undefined in the final state. As mentioned above however, setting undefined in the function before changing state works great. In my case, I set it in my mouseArea in onPressed.
onPressed: {
plotWindow04Frame.anchors.bottom = undefined
plotWindow04Frame.anchors.left = undefined
plotWindow04Frame.state = "inDrag"
}
I found it was not necessary to mention the anchor in the onReleased, just the next state.
onReleased: {
plotWindow04Frame.state = "dropped"
}
Also, I should mention, that the final "dropped" state does not mention anchors either, just opacity.
states: [
State {
name: "inDrag"
PropertyChanges {
target: plotWindow04Frame
opacity: .5
}
},
State {
name: "dropped"
PropertyChanges {
target: plotWindow04Frame
opacity: 1
}
}
]
transitions: Transition {
NumberAnimation { properties: "opacity"; duration:200 }
}
}
(The idea here was that these plot windows would become translucent (opacity: 0.5) while dragging, but return to opaque (opacity: 1) when the user drops them)
What is nice is that the plotwindow "rectangles" are initially anchored to the bottom of the GUI, but once the user picks them up, they can put them where ever they like.