I´ve created a draggable custom Component in order to manage the geometry of individual Quick Controls Components.

The componet has 2 parts:

  • The "Manipulator" which is a draggable and resizable Rectangle
  • The inner component which is in the center of the manipulator


Description of the behavior:

  1. No focus: the default state, the Manipulator is invisible and you can only see the inner component
  2. Focused: When you click the component (or try to drag it) you enter this state and the Manipulator becomes visible but you can´t access the inner component. Disabled pressing Escape or clicking outside the component (goes to state 1)
  3. Inner Focus: when you double click on the component The Manipulator keeps visible and you can still still resize but the the inner component has the main focus (for example a TextEdit now could be editable). Disabled pessing Escape (goes to state 2) or clicking outside the component (goes to state 1)


Example of the Component when the Manipulator area is visible:


The logic of this component would be similar to the logic of a folder in a Desktop Enviroment (except for resizing) The manipulator would be the folder itself and the inner component is its name.

analogy with folder:


Here I post a simplified version of my manipulator, I´m sure it will help to construct an answer, (I tried a lot of variations for several hours, this is one of those not functional attempts)

Qt Code: 
  1. FocusScope{
  2.     id: root
  3.     width: 175; height: 25;
  4.     focus: true
  5.  
  6.     states: [
  7.         State {
  8.             name: "noFocus"
  9.             when: !manipulator.activeFocus && !innerComp.activeFocus
  10.             PropertyChanges {
  11.                 target: innerComp
  12.                 enabled: false
  13.             }
  14.             PropertyChanges {
  15.                 target: manipulator
  16.                 visible: false
  17.             }
  18.         },
  19.  
  20.         State {
  21.             name: "focused"
  22.             when: manipulator.activeFocus
  23.             PropertyChanges {
  24.                 target: innerComp
  25.                 enabled: false
  26.             }
  27.             PropertyChanges {
  28.                 target: manipulator
  29.                 visible: true
  30.             }
  31.         },
  32.         State {
  33.             name: "innerFocus"
  34.             when: innerComp.activeFocus
  35.             PropertyChanges {
  36.                 target: innerComp
  37.                 enabled: true
  38.             }
  39.             PropertyChanges {
  40.                 target: manipulator
  41.                 visible: true
  42.             }
  43.         }
  44.     ]
  45.  
  46.     //visual area of manipulation (drag, redimension, etc)
  47.     MouseArea{
  48.         id: manipulator
  49.         anchors.fill: parent
  50.  
  51.         onDoubleClicked: forceActiveFocus(innerComp) //go to state 3 "innerFocus"
  52.         drag.target: manipulator
  53.  
  54.         Keys.onEscapePressed: forceActiveFocus(root) //I don´t think this is the correct to loose focus but I don´t know how to do that
  55.  
  56.         Rectangle {
  57.             id: background
  58.             anchors.fill: parent
  59.             color: "lightsteelblue";
  60.         }
  61.     }
  62.     //Inner Component (TextField for example)
  63.     InnerComp {
  64.         id: innerComp
  65.         anchors.fill: parent
  66.  
  67.         Keys.onEscapePressed: forceActiveFocus(manipulator) //return state 2 "focused"
  68.     }
  69. }
To copy to clipboard, switch view to plain text mode 

I posted my question in StackOverflow: http://stackoverflow.com/questions/39298647/ but I thought this would be a good place to ask too.