Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Cycling Tab Navigation between Custom Components

    General and Desktop
    1
    1
    54
    Loading More Posts
    • 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
      deleted385 last edited by deleted385

      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 Reply Quote 0
      • First post
        Last post