Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Cycling Tab Navigation between Custom Components



  • I've following Custom Component for single line TextInput:

    RowLayout {
        height: 20
        property alias label: label.text
        property alias isEnabled: field.enabled
        property alias text: field.text
        property double labelWidth: 0
        property int textAlignment: Text.AlignLeft
    
        Label {
            id: label
            Layout.minimumWidth: labelWidth > 0? labelWidth : Con.minLabelWidth
            Layout.alignment: Qt.AlignTop
        }
    
        ColumnLayout{
            TextInput{
                id: field
                Layout.fillWidth: true
                cursorVisible: activeFocus
                selectByMouse: true
                clip: true
                leftPadding: 2
                horizontalAlignment: textAlignment
            }
            Rectangle{
                id: bottomBorder
                Layout.fillWidth: true
                color: field.activeFocus? "lightblue" : "lightgray"
                height: 2
            }
        }
        onFocusChanged: if(activeFocus) field.forceActiveFocus()
    }
    

    similar one for multi line TextArea:

    RowLayout {
        ...
        Label {...}
        ColumnLayout{
            ScrollView{
                Layout.fillHeight: true
                Layout.fillWidth: true
                TextArea{
                    id: field
                    wrapMode: "WrapAtWordBoundaryOrAnywhere"
                    width: parent.width
                    height: parent.height
                    selectByKeyboard: true
                    selectByMouse: true
                    leftPadding: 2
                    rightPadding: 5
                    cursorVisible: activeFocus
                }
            }
            Rectangle{...}
        }
        onFocusChanged: if(activeFocus) field.forceActiveFocus()
    }
    

    and a Shape button:

    Item {
        property alias pathData: svg.path
        property alias toolTip: tip.text
        property bool hasToolTip: true
        property alias isEnabled: area.enabled
        signal clicked()
    
        width: 28
        height: width
    
        Shape{
            transform: Scale{ xScale: 1.2; yScale: xScale }
            ShapePath{
                id: path
                fillColor: "black"
                PathSvg{
                    id: svg
                    path: pathData
                }
            }
        }
    
        ToolTip{
            id: tip
            visible: hasToolTip? area.containsMouse : false
        }
    
        MouseArea{
            id: area
            anchors.fill: parent
            onClicked: parent.clicked()
            hoverEnabled: true
            onPressed: path.fillColor = area.pressed? "red" : "black"
            onHoveredChanged: path.fillColor = area.containsMouse? "blue" : "black"
            onEnabledChanged: path.fillColor = enabled? "black" : "gray"
        }
        onFocusChanged: path.fillColor = activeFocus? "red" : "black"
    }
    

    They're named LineField, AreaField, and PathButton respectively. In some of my Views, I've all these wrapped with ColumnLayout like this:

    ColumnLayout{
        LineField{
            label: "Name"
            text: addContext.newTenant.name
            onTextChanged: addContext.newTenant.name = text
        }
        LineField{
            label: "Father"
            text: addContext.newTenant.father
            onTextChanged: addContext.newTenant.father = text
        }
        LineField{
            label: "Mother"
            text: addContext.newTenant.mother
            onTextChanged: addContext.newTenant.mother = text
        }
        LineField{
            label: "Husband"
            text: addContext.newTenant.husband
            onTextChanged: addContext.newTenant.husband = text
        }
        AreaField{
            label: "Address"
            text: addContext.newTenant.address
            onTextChanged: addContext.newTenant.address = text
        }
        LineField{
            label: "NID"
            text: addContext.newTenant.nid
            onTextChanged: addContext.newTenant.nid = text
        }
        LineField{
            label: "Contact No."
            text: addContext.newTenant.contactNo
            onTextChanged: addContext.newTenant.contactNo = text
        }
        PathButton{
            pathData: Con.AddIcon
            Layout.alignment: Qt.AlignRight
            onClicked: addContext.addNewTenant()
            Layout.topMargin: 3
        }
    }
    

    I want TAB to shift focus to the subsequent Custom Component or the first Custom Component, if the last item, i.e. PathButton, inside the ColumnLayout is focused and want it to cycle until I take focus to another ColumnLayout like this by clicking.

    One way I've found is the KeyNavigation.tab BUT I've a lot of these in my views so this will take quite a lot of time to give each Custom Component an id and put that id in KeyNavigation.tab to set focus manually.

    How can I make this process automatic without id and KeyNavigation.tab?


Log in to reply