[Solved] FocusScope and layouts

sohail

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.0

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

}

// TestFocusScope.qml
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ApplicationWindow
{
width: 600
height: 100

ColumnLayout
{
    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.0

FocusScope
{
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!

janarve

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@

sohail

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.