Как управлять фокусом с государствами в моем настраиваемом компоненте QML?

Question

Я создал перетаскиваемый пользовательский компонент для управления геометрией отдельных компонентов Quick Controls.

CompoNet имеет 2 части:

• «Манипулятор», который является перетаскиваемым и изменяемыми Прямоугольник
• Внутренний компонент, который находится в центре манипулятора

Описание поведение:

1. Без внимания : Состояние по умолчанию, Манипулятор невидим , и вы можете видеть только внутренний компонент
2. Focused: При нажатии на компонент (или попытаться перетащить его) вы вводите это состояние и Манипулятор становится видимым, но вы можете Нет доступа внутренний компонент. Disabled нажатие побег или нажав вне компонента (переходит в состояние 1)
3. Inner Focus: при двойном щелчке на компоненте Манипулятор сохраняет видимое и вы все еще можете все еще изменить размер, но внутренний компонент имеет основное внимание (например, TextEdit теперь может быть редактируемый). Disabled pessing побег (переходит в состояние 2) или щелкнув вне компонента (переходит в состояние 1)

Example of the Component when the Manipulator area is visible

Логика этого компонента будет аналогична логике папки в окружении рабочего стола (кроме изменения размера). Манипулятор будет самой папкой, а внутренний компонент - его именем.

analogy with folder

Здесь я выкладываю упрощенную версию своего манипулятора, я уверен, что это поможет построить ответ, (я пробовал много вариаций в течение нескольких часов, это один из тех не функциональных попыток)

FocusScope{ 
    id: root 
    width: 175; height: 25; 
    focus: true 

    states: [ 
     State { 
      name: "noFocus" 
      when: !manipulator.activeFocus && !innerComp.activeFocus 
      PropertyChanges { 
       target: innerComp 
       enabled: false 
      } 
      PropertyChanges { 
       target: manipulator 
       visible: false 
      } 
     }, 

     State { 
      name: "focused" 
      when: manipulator.activeFocus 
      PropertyChanges { 
       target: innerComp 
       enabled: false 
      } 
      PropertyChanges { 
       target: manipulator 
       visible: true 
      } 
     }, 
     State { 
      name: "innerFocus" 
      when: innerComp.activeFocus 
      PropertyChanges { 
       target: innerComp 
       enabled: true 
      } 
      PropertyChanges { 
       target: manipulator 
       visible: true 
      } 
     } 
    ] 

    //visual area of manipulation (drag, redimension, etc) 
    MouseArea{ 
     id: manipulator 
     anchors.fill: parent 

     onDoubleClicked: forceActiveFocus(innerComp) //go to state 3 "innerFocus" 
     drag.target: manipulator 

     Keys.onEscapePressed: forceActiveFocus(root) //I don´t think this is the correct to loose focus but I don´t know how to do that 

     Rectangle { 
      id: background 
      anchors.fill: parent 
      color: "lightsteelblue"; 
     } 
    } 
    //Inner Component (TextField for example) 
    InnerComp { 
     id: innerComp 
     anchors.fill: parent 

     Keys.onEscapePressed: forceActiveFocus(manipulator) //return state 2 "focused" 
    } 
} 

Answer 1

я, наконец, нашел решение, как кто-то в кварт форуме мотивационные:

Возможно обратное зависимость, то есть сделать фокус д epend на состоянии, а не состояние зависит от фокуса?

Поэтому я изменил свой код, и теперь он работает!

я выкладываю решение здесь для тех, кто может быть заинтересован в нем (как я сказал, что это упрощенная версия реального кода):

Item { 
    id: root 
    width: 175; height: 25; 

    states: [ 
     State { 
      name: "noFocus" 

      PropertyChanges { 
       target: innerComp; enabled: false 
      } 
      PropertyChanges { 
       target: background; visible: false 
      } 
      PropertyChanges { 
       target: manipulator; focus: true 
      } 
     }, 

     State { 
      name: "focused" 

      PropertyChanges { 
       target: innerComp; enabled: false 
      } 
      PropertyChanges { 
       target: background; visible: true 
      } 
      PropertyChanges { 
       target: manipulator; focus: true 
      } 
     }, 
     State { 
      name: "innerFocus" 

      PropertyChanges { 
       target: innerComp; enabled: true 
      } 
      PropertyChanges { 
       target: background; visible: true 
      } 
      PropertyChanges { 
       target: manipulator; focus: true 
      } 
     } 
    ] 
    state: "noFocus" 

    //visual area of manipulation (drag, redimension, etc) 
    MouseArea{ 
     id: manipulator 
     anchors.fill: parent 

     onPressed: { 
      root.state = "focused" 
      forceActiveFocus(manipulator) //this prevents loosing focus in some especific situations 
     } 
     onDoubleClicked: root.state = "innerFocus" 

     Keys.onEscapePressed: root.state = "noFocus" 

    } 
    Rectangle { 
     id: background 
     anchors.fill: parent 
     color: "lightsteelblue"; 
    } 
    //Inner Component (TextField for example) 
    InnerComp { 
     id: innerComp 
     anchors.fill: parent 

     Keys.onEscapePressed: root.state = "focused" 
    } 
}