What is focus in qml?

[JennyAug13]

Hello , I am a beginner in qml, and may i know the focus term. I have a simple example here:

import QtQuick 2.6
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
Rectangle{
width: 50;height: 50
color: "red"
focus: true
anchors.centerIn: parent
}
Rectangle{
width: 50; height: 50
color: "blue"
anchors.centerIn: parent
}
}
Though i set the focus to red rectangle, i can see blue rectangle when i run this.
Here are two overlapping rectangles and I would like to do it as: when user clicks on the window, the focus should change to red rectangle and see red rectangle. It would be nice someone helps in this simple example.

[Ilja]

The "focus" property refers to Keyboard focus (http://doc.qt.io/qt-5/qtquick-input-focus.html).

What happens in your example is that the red rectangle is painted and the blue rectangle is then painted on top of that.

What you can do is use a MouseArea to react to the mouse click and then toggle the "visible" property of the rectangles in the onClick handler.

[JennyAug13]

@Ilja Cant i do anything using focus property?

[Ilja]

@JennyAug13 You can, but it is not used for showing or not showing GUI elements. The focus property is used for capturing keyboard input focus.

[JennyAug13]

Is that possible for mouse press or drag input status also?

[Ilja]

@JennyAug13 As I mentioned earlier, you need a MouseArea to detect mouse clicks. See http://doc.qt.io/qt-5/qml-qtquick-mousearea.html