2016-09-02 4 views
1

개별 빠른 컨트롤 구성 요소의 구조를 관리하기 위해 드래그 가능한 맞춤 구성 요소를 만들었습니다.내 맞춤형 QML 구성 요소에서 상태와 포커스를 관리하는 방법은 무엇입니까?

componet 2 개 부분으로 구성

  • 드래그 및 크기 조정 직사각형
  • 매니퓰레이터의

설명의 중심에 내부 구성 요소 인 "퓰" 행동 :

  1. 초점 없음 : 기본 상태는 조작자가 보이지 않는 당신은 단지 내부 구성 요소를
  2. 집중을 볼 수 구성 요소를 클릭하면 (또는 드래그하려고) 당신이 이 상태 입력하고 조작자가 표시됩니다하지만 당신이 할 수있는 내부 구성 요소 인 에 액세스하십시오. 탈출을 누르거나 구성 요소 외부를 클릭 장애인
  3. 내면의 집중력 (상태 1로 이동) : 당신은 구성 요소를 두 번 클릭 매니퓰레이터 볼 유지하고 당신은 여전히 ​​여전히 크기를 조정할 수 있지만 내부 구성 요소는 주요 포커스가있을 때 (예를 들어 TextEdit은 편집 가능). 장애인 pessing 탈출 (이 구성 요소의 논리는 데스크톱 환경에서 폴더의 논리와 유사 할 것

Example of the Component when the Manipulator area is visible

(상태 1로 이동) 구성 요소 외부 또는 클릭 (상태 2로 이동) 크기 조정 제외) 조작자는 폴더 자체이고 내부 구성 요소는 이름입니다. 여기

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" 
    } 
} 
+0

내가 초점에 내장 심각하게 부족한 것으로 발견 한 : (나는이 실제 코드의 단순화 된 버전입니다 말했듯이)

나는 거기에 관심이있을 수있는 사람들을 위해 여기에 솔루션을 게시 일반적으로 여러 항목의 선택 관리자에게 이벤트 디스패처 역할을하는 단일 항목에 포커스가 고정되어 있습니다. 그게 내 용도예요. 마일리지가 다를 수 있습니다. – dtech

답변

0

내가 마지막으로 Qt는 포럼에서 사람으로, 해결책을 찾을 수는 sugested :

어쩌면, 종속성을 반대로 즉, 초점 개발을 상태에 의존하지 않고, 상태가 초점에 의존하지 않습니까?

그래서 코드가 변경되었습니다.

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" 
    } 
}