[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.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!



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.