Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Cycling Tab Navigation between Custom Components
Forum Updated to NodeBB v4.3 + New Features

Cycling Tab Navigation between Custom Components

Scheduled Pinned Locked Moved Unsolved General and Desktop
1 Posts 1 Posters 134 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    deleted385
    wrote on last edited by deleted385
    #1

    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?

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved