Unsolved 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
, andPathButton
respectively. In some of my Views, I've all these wrapped withColumnLayout
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 theColumnLayout
is focused and want it to cycle until I take focus to anotherColumnLayout
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 anid
and put thatid
inKeyNavigation.tab
to set focus manually.How can I make this process automatic without
id
andKeyNavigation.tab
?