[Solved] FocusScope and layouts
-
I figured out the issue: I need to give all stretchy elements a width even if they will be stretched by default.
Hey guys and gals, I have some Qt Quick code where I'm trying to correctly implement focus scope. What I'd like is for the focus to be on the inner TextEdit element when the app starts. I can accomplish this by changing the root of MyEditWidget to be a FocusScope, but the problem is that when I do that, the layout is messed up. For starters, I'd like the UI to look like this: http://i.imgur.com/bQA2DDm.png . This layout is accomplished with the attached code: @
/* MyEditWidget.qml */
import QtQuick 2.1
import QtQuick.Layouts 1.0RowLayout
{
Rectangle
{
width: 50
height: 50
color: "purple"
}Rectangle { color: "red" height: 50 Layout.fillWidth: true Item { anchors.fill: parent anchors.margins: 5 TextInput { anchors.fill: parent verticalAlignment: TextInput.AlignVCenter horizontalAlignment: TextInput.AlignLeft anchors.verticalCenter: parent.verticalCenter font.pointSize: 20 focus: true onFocusChanged: console.log(focus); } } }
}
// TestFocusScope.qml
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0ApplicationWindow
{
width: 600
height: 100ColumnLayout { anchors.fill: parent anchors.margins: 10 spacing: 10 MyEditWidget { focus: true } ListView { model: 10 Layout.fillWidth: true Layout.fillHeight: true delegate: Text { text: index } highlight: Rectangle { color: "red" } clip: true } }
}
@Now, if I change MyEditWidget.qml to have a FocusScope as the root element, I get this layout: http://i.imgur.com/uG8r8zV.png - Note that the focus is behaving as I want this time, but the layout is not.
The code that does this is here. The only difference is the root is now a FocusScope:
@
import QtQuick 2.1
import QtQuick.Layouts 1.0FocusScope
{
RowLayout
{
Rectangle
{
width: 50
height: 50
color: "purple"
}Rectangle { color: "red" height: 50 Layout.fillWidth: true Item { anchors.fill: parent anchors.margins: 5 TextInput { anchors.fill: parent verticalAlignment: TextInput.AlignVCenter horizontalAlignment: TextInput.AlignLeft anchors.verticalCenter: parent.verticalCenter font.pointSize: 20 focus: true onFocusChanged: console.log(focus); } } } }
}
@No amount of Layout.fillWidthing or providing a height/width to the FocusScope in MyEditWidget.qml seems to help. Any suggestions?
Thanks!
-
A parent layout will treat a child Row/Column/GridLayout a bit different than regular Items. For instance, a sublayout is implicitly bound to the geometry of the parent item. However, a layout with no parent layout needs to explicitly bind to the geometry of its parent.
Therefore, insert this between line 8/9:
@anchors.fill: parent@In addition, a FocusScope will be interpreted as non-stretching unless you specify Layout.fillWidth: true. Therefore, insert this between line 6/7:
@Layout.fillWidth: true@ -
You're right, these two changes worked to solve the issue. Thanks very much for your detailed explanation, I now have a better understanding of the issue.