[Interest] StackView and focus question
Elvis Stansvik
elvstone at gmail.com
Tue Mar 29 18:07:39 CEST 2016
Hi,
In trying to debug some focus issues when using a StackView (Qt Quick
2), I came across something I find strange, and I'm hoping someone can
explain it to me.
Take a look at the following test case (main.qml, Red.qml, Green.qml,
Blue.qml and FocusIndicator.qml):
main.qml:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
width: 640
height: 480
visible: true
property Item red: Red {}
property Item green: Green {}
property Item blue: Blue {}
StackView {
id: stackView
initialItem: red
anchors.fill: parent
focus: true
onCurrentItemChanged: {
if (currentItem) {
// Request focus for the current item.
currentItem.focus = true
console.log("focus: " + focus + ", activeFocus: " + activeFocus)
}
}
Timer {
// Loop through red -> green -> blue items.
interval: 2000
running: true
repeat: true
onTriggered: {
if (stackView.currentItem === red) {
console.log("switching to green")
stackView.push({item: green, replace: true})
} else if (stackView.currentItem === green) {
console.log("switching to blue")
stackView.push({item: blue, replace: true})
} else {
console.log("switching to red")
stackView.push({item: red, replace: true})
}
}
}
}
}
Red.qml:
import QtQuick 2.4
FocusScope {
focus: true
Rectangle {
width: parent.width/2
height: parent.height/2
color: "red"
focus: true
FocusIndicator {}
}
FocusIndicator {}
}
Green.qml:
import QtQuick 2.4
FocusScope {
focus: true
Rectangle {
width: parent.width/2
height: parent.height/2
color: "green"
focus: true
FocusIndicator {}
}
FocusIndicator {}
}
Blue.qml:
import QtQuick 2.4
FocusScope {
focus: true
Rectangle {
width: parent.width/2
height: parent.height/2
color: "blue"
focus: true
FocusIndicator {}
}
FocusIndicator {}
}
FocusIndicator.qml:
import QtQuick 2.4
// Decorative item to indicate focus / active focus.
Row {
id: indicator
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 2
anchors.topMargin: 2
// Left rectangle indicates focus.
Rectangle {
width: 10
height: 10
color: indicator.parent.focus ? "green" : "red"
}
// Right rectangle indicates active focus.
Rectangle {
width: 10
height: 10
color: indicator.parent.activeFocus ? "green" : "red"
}
}
The main code cycles through showing an instance of the Red, Green and
Blue component as the only item in a StackView. When the current item
changes (onCurrentItemChanged), it requests focus for the new current
item.
Red, Green and Blue consists of a FocusScope with a nested rectangle.
Both the FocusScope and the nested rectangle requests focus initially
(focus: true), and both are decorated with a FocusIndicator, which is
an item that indicates focus and activeFocus for its parent.
What surprises me is that, despite the printout:
qml: focus: true, activeFocus: false
qml: switching to green
qml: focus: true, activeFocus: true
qml: switching to blue
qml: focus: true, activeFocus: true
qml: switching to red
qml: focus: true, activeFocus: true
qml: switching to green
...
...
which is what I would expect, so far so good. But (!): The visual
result is that when switching to green and blue for the first time
(lines 2-3 and 4-5 in the printout), the focus indicator shows red and
green for the current FocusScope, which would correspond to "focus:
false, activeFocus: true" (not seen anywhere above, and something I
thought an impossible combination.. doesn't activeFocus imply focus?).
Note that it shows green green (focus: true, activeFocus: true) for
the nested rectangle at that point, it's just the surrounding
FocusScope which has this weird state.
So what's going on? Is it just my FocusIndicator gadged that is broken
somehow? I think it's pretty simple..
Very thankful for any clarifications! I'm attaching the files for
easier local testing.
Elvis
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Blue.qml
Type: application/octet-stream
Size: 229 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160329/9078d79d/attachment.obj>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: FocusIndicator.qml
Type: application/octet-stream
Size: 538 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160329/9078d79d/attachment-0001.obj>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Green.qml
Type: application/octet-stream
Size: 230 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160329/9078d79d/attachment-0002.obj>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: main.qml
Type: application/octet-stream
Size: 1327 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160329/9078d79d/attachment-0003.obj>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Red.qml
Type: application/octet-stream
Size: 228 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160329/9078d79d/attachment-0004.obj>
More information about the Interest
mailing list