Qt Quick 예제 - 포인터 핸들러

Qt Quick Controls 에는 여러 종류의 사용자 인터페이스에 충분한 사전 빌드된 컴포넌트가 포함되어 있지만, 때로는 이러한 컴포넌트를 "처음부터" 작성해야 할 수도 있습니다. 이 경우 포인터 핸들러를 상당히 많이 사용해야 합니다. 이 예제는 몇 가지 일반적이고 덜 일반적인 상호 작용 패턴을 구현하는 방법을 보여주는 작은 예제 모음입니다.

예제를 실행 파일로 빌드하는 경우 최상위 수준 ListView 에서 페이지를 선택할 수 있습니다. TouchpointFeedbackSprite 및 MouseFeedbackSprite 컴포넌트는 PointHandler 을 사용하여 사용자가 포인팅 디바이스로 무엇을 하고 있는지에 대한 피드백을 제공하는 방법을 보여줍니다. 이러한 컴포넌트는 예제 전체에서 항상 표시되며 다른 곳의 상호 작용을 방해하지 않습니다. 이러한 구성 요소는 사용자 인터페이스의 비디오 또는 라이브 데모가 필요한 경우 재사용할 수 있어 편리합니다.

또는 특정 종류의 컴포넌트가 어떻게 빌드되는지 빠르게 확인할 수 있도록 개별 QML 파일 중 일부를 명령줄에서 qml 도구로 실행할 수도 있습니다.

탭 핸들러

'탭' 페이지에서는 터치스크린 탭, 길게 누르기, 다양한 버튼으로 마우스 클릭을 감지하는 방법을 보여줍니다. 다양한 gesturePolicy 값을 사용해 볼 수도 있습니다.

멀티 탭 버튼

이 페이지에는 서로 다른 gesturePolicy 값을 가진 세 가지 사용자 정의 Button 컴포넌트가 있습니다. 한 버튼은 누를 때부터 놓을 때까지 손가락이나 마우스를 버튼 안에 유지해야 하고, 다른 버튼은 버튼 밖으로 드래그했다가 다시 드래그한 후 놓아도 실행되며, 다른 버튼은 system-wide drag threshold 을 조금 지나면 누른 상태에서 종료됩니다. 터치스크린에서 이 예를 시도하면 세 가지 버튼과 동시에 다른 손가락으로 모두 상호작용할 수 있어야 합니다.

파이 메뉴

이 페이지에서는 길게 누르면 애니메이션이 표시되는 터치스크린 친화적인 파이 메뉴를 작성하는 방법을 보여 줍니다. 중앙 위치에서 섹터 중 하나로 드래그했다가 손을 떼면 메뉴 항목을 선택할 수 있습니다. 메뉴 바깥으로 드래그하거나 메뉴 가운데에서 손을 떼면 아무것도 선택되지 않습니다. 회색 뷰포트 밖으로 드래그하면 메뉴가 취소됩니다.

포인트 핸들러

"단일 포인트 핸들러" 페이지에서 PointHandler 는 SinglePointHandler::point 및 handlerPoint::device 에서 찾을 수 있는 일부 프로퍼티의 피드백을 제공합니다. 예제를 실행 파일로 빌드한 경우 이 피드백은 기본 pointerhandlers.qml 파일에 있는 포인트 핸들러의 피드백과 동시에 볼 수 있습니다.

"태블릿 캔버스" 페이지에서는 PointHandler 을 사용하여 다른 types of pointing devices 을 고유하게 감지하므로 컴퓨터에 연결된 드로잉 태블릿이 있는 경우 펜, 에어브러시 또는 마커와 같은 다양한 유형의 스타일러스로 캔버스 항목에 그림을 그릴 수 있습니다. 스타일러스 지우개로 획을 '지울' 수 있습니다(여기서는 배경색으로 위에 그리는 방식으로 수행됨). 여러 HoverHandlers 에서 어떤 유형의 스타일러스 또는 지우개가 감지되었는지에 대한 피드백을 제공합니다.

호버 핸들러

'호버 사이드바' 페이지에서는 마우스가 버튼 컴포넌트와 그 컨테이너에 동시에 마우스를 가져가는 경우를 감지하는 방법을 보여줍니다. HoverHandler::blocking 속성을 설정하여 전파를 비활성화할 수 있습니다. 여기에서 HoverHandler 및 MouseArea 의 모든 조합을 시도하여 마우스오버 감지를 처리하는 방식을 비교할 수 있습니다. 그리고 하나 더 HoverHandler 는 현재 마우스 위치를 장면 좌표로 표시하는 데 사용됩니다.

애니메이션화된 '플랫폼'의 HoverHandler 이 마우스 커서 아래로 미끄러질 때마다 마우스가 가리키는지 확인할 수도 있습니다.

드래그 핸들러

AnchorChanges "조이스틱" 페이지에는 Image 을 드래그하는 DragHandler 이 있습니다. State 을 클릭하면 드래그가 가능하도록 앵커의 잠금이 해제되고, AnchorAnimation 을 클릭하면 노브를 놓았을 때 중앙 위치로 돌아오는 애니메이션이 적용됩니다.

"플링 애니메이션" 페이지에서는 QML에서 QEventPoint::velocity()의 값을 간단히 사용할 수 있도록 하는 DragHandler::centroid::velocity 속성의 한 가지 사용법을 보여줍니다. 이 예제에서 사용된 MomentumAnimation 컴포넌트는 더 무거운 솔루션을 사용하지 않고도 물리(운동량 및 마찰)를 시뮬레이션하는 한 가지 방법을 보여줍니다.

PinchHandler

"핀치" 페이지에서는 PinchHandler 의 축 최소 및 최대 속성을 통해 관리되는 제약 조건을 사용하여 일반적인 크기 조정, 회전 및 이동을 수행하기 위해 손가락 두 개가 필요한 핀치 핸들러와 세 개가 필요한 핀치 핸들러를 여러 개 보여 줍니다. PinchHandler 인스턴스 중 하나는 위치, 크기 조정, 회전이 아닌 다른 Rectangle 프로퍼티를 조작하는 데 사용됩니다. 다양한 PinchHandler 프로퍼티가 다양한 방식으로 바인딩됩니다. 각 인스턴스를 고유하게 조작할 수 있어야 합니다. 일부 항목에는 드래그 핸들러와 탭 핸들러도 있습니다.

상호 운용성

슬라이더

"믹서" 페이지는 ListView 델리게이트 내에서 여러 핸들러를 사용하는 방법을 보여줍니다. 여러 개의 Slider 컴포넌트와 동시에 상호 작용할 수 있으며 ListView 을 옆으로 쓸어 넘길 수 있습니다.

• DragHandler 을 사용하면 슬라이더 노브가 미끄러질 수 있는 '트랙'을 따라 아무 곳으로나 드래그할 수 있습니다. 기본 snapMode 은 DragHandler.SnapAuto 이므로 system-wide drag threshold 을 지나 드래그하면 노브가 마우스 또는 터치포인트 아래 중앙의 위치로 스냅됩니다.
• WheelHandler 은 노브 Image 의 y 속성을 직접 조정합니다.
• BoundaryRule 은 DragHandler 또는 WheelHandler 이 노브를 너무 멀리 드래그하는 것을 방지합니다.
• TapHandler 은 일반적인 Slider 컴포넌트보다 제스처가 하나 더 추가되어 노브를 탭할 수 있습니다.

지도

'지도' 페이지에서는 SVG Image 를 드래그, 변형 및 크기 조정하는 방법을 보여줍니다. 지도에서 특정 위치를 확대할 수 있으며, 확대/축소 수준이 크게 변경되면 Image::sourceSize 을 변경하여 다른 해상도로 SVG를 다시 렌더링하도록 요청할 수 있습니다. 두 손가락으로 세로로 드래그하면 Rotation 트랜스폼을 조작하여 지도를 기울이는 DragHandler 이 활성화됩니다.

페이크 플릭 가능

"페이크 플릭커블" 페이지에는 개별 포인터 핸들러와 애니메이션을 사용하여 Flickable 의 기능 대부분을 재현하려는 시도가 포함되어 있습니다. Flickable은 복잡한 컴포넌트이지만, 여기에서는 복잡하지 않고 일부 기능만 사용하려는 경우를 대비하여 제공하는 개별 동작을 분리하는 한 가지 방법을 볼 수 있습니다.

또한 포인터 핸들러로 구동되는 몇 가지 컨트롤이 더 있는 슬라이드 아웃 '서랍' 컴포넌트도 있습니다.

예제 프로젝트 @ code.qt.io