UI에 인터랙션 추가

미리 설정된 기본 컴포넌트의 인스턴스를 만들어 포인팅 장치나 키보드를 사용하여 작업을 수행하거나 화면의 보이는 영역을 가로 또는 세로로 넘기는 등의 상호 작용 방법을 UI에 추가할 수 있습니다. Components > Default Components > Basic 에서 사용할 수 있습니다.

또한 사전 설정된 UI 컨트롤의 인스턴스를 만들어 사용자에게 애플리케이션의 진행 상황을 알리거나 사용자의 입력을 수집할 수 있습니다.

사용자 상호 작용에 사용할 수 있는 기본 구성 요소는 다음과 같습니다:

• 마우스 영역
• 초점 범위
• 플릭 가능
• 기본 인터랙션 방법 요약

Properties 보기에서 컴포넌트 인스턴스의 속성에 대한 값을 지정할 수 있습니다.

마우스 영역 만들기

신호와 핸들러는 마우스 상호작용을 전달하는 데 사용됩니다. 특히 Mouse Area 컴포넌트를 사용하여 정의된 영역 내에서 마우스 이벤트를 받아들이는 자바스크립트 콜백(신호 핸들러라고도 함)을 정의할 수 있습니다.

마우스 영역을 정의하는 한 가지 빠른 방법은 컴포넌트를 선택한 다음 컨텍스트 메뉴에서 Add Mouse Area 을 선택하는 것입니다. 이렇게 하면 마우스 영역이 부모 영역에 고정됩니다. 부모가 직사각형 (또는 항목에서 파생된 컴포넌트)인 경우 마우스 영역은 부모의 치수에 의해 정의된 영역을 채웁니다.

부모보다 작거나 큰 영역을 정의할 수도 있습니다. 버튼과 같은 여러 컨트롤에는 마우스 영역이 포함되어 있습니다.

미리 정의된 신호

마우스 영역은 다양한 마우스 이벤트에 대한 응답으로 신호를 방출합니다:

• canceled()
• clicked()
• doubleClicked()
• entered()
• exited()
• positionChanged()
• pressAndHold()
• pressed()
• released()

마우스 영역 활성화

Mouse Area 은 일반적으로 해당 컴포넌트에 마우스 처리를 제공하기 위해 보이는 컴포넌트와 함께 사용하는 보이지 않는 컴포넌트입니다. 효과적으로 프록시 역할을 함으로써 마우스 처리를 위한 로직을 Mouse Area 컴포넌트에 포함할 수 있습니다.

마우스 영역을 만들려면 다음과 같이 하세요:

• Navigator 또는 2D 보기에서 컴포넌트를 선택한 다음 컨텍스트 메뉴에서 Add Mouse Area 을 선택합니다.
• Components 에서 Mouse Area 컴포넌트를 드래그합니다:
  1. Components > Default Components > Basic 로 이동합니다.
  2. Mouse Area 컴포넌트를 Navigator 또는 2D 보기의 다른 컴포넌트로 드래그합니다.

Properties 에서 Mouse Area 섹션의 Area 은 프록시된 컴포넌트에 대해 마우스 처리를 활성화합니다.

호버링 설정

기본적으로 Mouse Area 컴포넌트는 마우스 클릭만 보고하고 마우스 커서 위치의 변경 사항은 보고하지 않습니다. Hover 을 선택하면 마우스 버튼을 누르지 않아도 적절한 핸들러가 사용되며 필요에 따라 다른 속성 값이 업데이트됩니다.

마우스 이벤트에 마우스 영역을 투명하게 만들기

Mouse Area 은 보이지 않는 컴포넌트이지만 Visible 속성이 있습니다. 마우스 영역을 마우스 이벤트에 투명하게 만들려면 Visibility 섹션에서 Visible 의 선택을 취소합니다.

마우스 버튼에 반응하기

Mouse Area 섹션의 Accepted buttons 필드에서 마우스 영역이 반응할 마우스 버튼을 선택합니다.

마우스 영역이 모든 마우스 버튼에 반응하도록 하려면 AllButtons 을 선택합니다.

Code 보기, Edit 모드 또는 Binding Editor 에서 값을 OR 연산자(|)와 결합하여 더 많은 버튼에 대한 지원을 추가할 수 있습니다. 사용 가능한 값에 대한 자세한 내용은 MouseArea::acceptedButtons 을 참조하세요.

커서 모양 설정

Cursor shape 필드에서 이 마우스 영역의 커서 모양을 선택합니다. 마우스 커서가 표시되지 않는 플랫폼에서는 이 값이 아무런 영향을 미치지 않을 수 있습니다.

신호 보류 간격 설정

Hold interval 필드에서 pressAndHold() 신호가 방출되기까지의 경과 시간(밀리초)을 재정의할 값을 지정합니다. 값을 명시적으로 설정하지 않거나 재설정하지 않으면 전역으로 설정된 애플리케이션 스타일 힌트를 따릅니다. 특정 Mouse Area 인스턴스에 대해 특정 간격이 필요한 경우 이 값을 설정합니다.

스크롤 제스처에 응답

트랙패드의 두 손가락 플릭 제스처와 같이 마우스가 아닌 장치의 스크롤 제스처에 응답하려면 Scroll gesture 을 선택합니다. 이 확인란을 선택하지 않으면 휠 이벤트가 휠이 있는 실제 마우스에서 발생하는 경우에만 휠 신호가 발생하고 스크롤 제스처 이벤트는 이를 처리할 다른 컴포넌트로 전달됩니다.

예를 들어, 사용자가 Mouse Area 인스턴스가 포함된 컴포넌트 위에 커서가 있는 상태에서 플릭 제스처를 수행하면 그 아래에 있는 Flickable 컴포넌트와 상호 작용하려고 할 수 있습니다. 이 속성을 false 로 설정하면 PinchArea 컴포넌트는 마우스 휠이나 핀치 제스처를 처리하고 Flickable 는 플릭 제스처를 처리할 수 있습니다.

이벤트 전파

마우스 위치 및 버튼 클릭에 대한 정보는 이벤트 핸들러 속성이 정의된 시그널을 통해 제공됩니다. 마우스 영역이 Mouse Area 컴포넌트의 다른 인스턴스 영역과 겹치는 경우 Propagate events 을 선택하여 clicked(), doubleClicked(), pressAndHold() 이벤트를 이러한 다른 컴포넌트로 전파할 수 있습니다. 각 이벤트는 스택 순서대로 그 아래에 활성화된 다음 Mouse Area 으로 전파되어 Mouse Area 이 이벤트를 수락할 때까지 이 시각적 계층 구조를 따라 전파됩니다.

도용 방지

Flickable 과 같이 하위 마우스 이벤트를 필터링하는 컴포넌트 내에 Mouse Area 인스턴스를 배치할 수 있지만, 플릭과 같은 제스처가 상위 컴포넌트에 의해 인식되면 마우스 이벤트가 Mouse Area 에서 도용될 수 있습니다.

Mouse Area 인스턴스에서 마우스 이벤트가 도용되지 않도록 하려면 Prevent stealing 을 선택합니다. 컴포넌트가 이벤트를 훔치기 시작한 후 이 값을 설정하면 다음 press() 이벤트까지 이 값은 적용되지 않습니다.

자세한 내용은 MouseArea 을 참조하세요.

드래그 속성 설정

Drag 섹션에서 컴포넌트 드래그에 대한 속성을 지정합니다. Target 필드에서 드래그할 컴포넌트를 선택합니다. 고정된 컴포넌트는 드래그할 수 없다는 점에 유의하세요.

Axis 필드에서 드래그를 가로, 세로 또는 둘 다로 할 수 있는지 여부를 지정합니다.

Threshold 필드에서 드래그 작업이 시작되는 시점의 임계값을 픽셀 단위로 설정합니다. 기본적으로 이 값은 플랫폼에 따라 달라지는 값에 바인딩됩니다.

드래그가 하위 Mouse Area 인스턴스를 재정의하도록 하려면 Filter children 을 선택합니다. 이렇게 하면 예를 들어 상위 Mouse Area 인스턴스가 드래그를 처리하고 하위 영역은 클릭을 처리할 수 있습니다.

드래그 작업이 시작된 후에만 대상 컴포넌트를 이동하려면 Smoothed 을 선택합니다. 이 확인란을 선택하지 않으면 대상 컴포넌트가 현재 마우스 위치로 바로 이동합니다.

초점 범위 설정

키를 누르거나 놓으면 키 이벤트가 생성되어 초점이 맞춰진 컴포넌트에 전달됩니다. 활성 포커스가 있는 컴포넌트가 없는 경우 키 이벤트는 무시됩니다. 활성 포커스가 있는 컴포넌트가 키 이벤트를 수락하면 전파가 중지됩니다. 그렇지 않으면 이벤트가 수락되거나 루트 컴포넌트에 도달하여 이벤트가 무시될 때까지 이벤트가 컴포넌트의 부모로 전송됩니다.

Advanced 섹션의 Focus 속성이 true 로 설정되어 있으면 컴포넌트는 포커스를 갖습니다. 그러나 재사용 가능하거나 가져온 컴포넌트의 경우 이것만으로는 충분하지 않으므로 Focus Scope 컴포넌트를 사용해야 합니다.

Focus Scope 컴포넌트의 인스턴스를 만들려면 Components > Default Components > Basic 으로 이동하세요.

각 포커스 범위 내에서 하나의 객체에 포커스가 활성화되어 있을 수 있습니다. 두 개 이상의 컴포넌트가 포커스를 활성화한 경우 포커스 범위가 없을 때와 마찬가지로 마지막으로 활성화한 컴포넌트가 포커스를 갖게 되고 다른 컴포넌트는 설정이 해제됩니다.

포커스 범위가 활성 포커스를 받으면 포커스가 설정된 포함된 컴포넌트(있는 경우)도 활성 포커스를 받습니다. 이 컴포넌트도 초점 범위인 경우 초점 범위와 하위 초점 컴포넌트 모두 활성 포커스를 갖게 됩니다.

Focus Scope 컴포넌트는 시각적 컴포넌트가 아니므로 자식 컴포넌트의 속성은 포커스 범위의 부모 컴포넌트에 노출되어야 합니다. 레이아웃과 포지셔너는 이러한 시각적 및 스타일링 속성을 사용하여 레이아웃을 만듭니다.

자세한 내용은 키보드 포커스에서 Qt Quick 을 참조하세요.

플릭 가능한 컴포넌트 만들기

Flickable 컴포넌트는 사용자가 드래그 앤 플릭할 수 있는 표면에 자식을 배치하여 뷰가 자식 컴포넌트 위로 스크롤되도록 합니다. 이 동작은 List View 및 Grid View 과 같이 많은 수의 자식 구성 요소를 표시하는 구성 요소의 기초를 형성합니다. 자세한 내용은 목록 보기 및 그리드 보기를 참조하십시오.

기존 사용자 인터페이스에서 사용자는 스크롤 막대 및 화살표 버튼과 같은 표준 컨트롤을 사용하여 뷰를 스크롤할 수 있습니다. 때로는 커서를 이동하면서 마우스 버튼을 길게 눌러 뷰를 직접 끌 수도 있습니다. 터치 기반 사용자 인터페이스에서 이 끌기 동작은 사용자가 뷰 터치를 중단한 후에도 스크롤이 계속되는 플리킹 동작으로 보완되는 경우가 많습니다.

플릭 가능한 구성 요소 클리핑

Flickable 컴포넌트의 콘텐츠는 자동으로 스크랩되지 않습니다. 구성 요소를 전체 화면 구성 요소로 사용하지 않는 경우 Visibility 섹션에서 Clip 을 선택하는 것이 좋습니다.

플리킹 사용

플릭 가능한 컴포넌트를 만들려면 다음과 같이 하세요:

1. Components > Default Components > Basic 로 이동합니다.
2. Flickable 컴포넌트를 Navigator 또는 2D 보기로 드래그합니다.
3. Flickable 섹션에서 Interactive 을 true 으로 설정합니다.

   

Interactive 을 false 으로 설정하여 일시적으로 플리킹을 비활성화합니다. 이렇게 하면 컴포넌트의 하위 컴포넌트와 특별한 상호 작용을 할 수 있습니다. 예를 들어 Flickable 컴포넌트의 자식인 팝업을 스크롤하는 동안 플릭 가능한 지도를 고정하고 싶을 수 있습니다.

플릭 방향 설정

Flickable 섹션에서 Flick direction 을 설정하여 사용자가 보기를 가로 또는 세로로 쓸어 넘길 수 있는지 여부를 결정합니다.

콘텐츠 높이가 플릭 가능한 높이와 같지 않은 경우 세로로, 콘텐츠 너비가 플릭 가능한 너비와 같지 않은 경우 가로로 플릭할 수 있도록 하려면 AutoFlickDirection 을 선택합니다.

콘텐츠 높이 또는 너비가 플리커블보다 크면 AutoFlickIfNeeded 을 선택합니다.

플릭 속도 설정

Flickable 섹션의 Max. velocity 필드에서 뷰를 플리킹할 최대 속도를 초당 픽셀 단위로 설정합니다.

Deceleration 필드에서 플릭이 감속되는 속도를 설정합니다.

움직임 설정

Flickable 섹션에서 Movement 필드의 값을 설정하여 플리커블이 뷰의 가장자리를 딱딱한 물리적 경계가 아닌 부드럽게 보이도록 만들지 여부를 결정합니다.

콘텐츠가 플리커블의 경계를 넘어 드래그 또는 플릭을 따르지 않는 사용자 지정 가장자리 효과를 만들려면 StopAtBounds 을 선택합니다.

Behavior 필드의 값에 따라 콘텐츠가 플리커블의 경계를 넘어 드래그 또는 플릭을 따르도록 하려면 FollowBoundsBehavior 을 선택합니다.

Press delay 필드에서 밀리초 단위로 플리커블의 자식에게 누름을 지연시킬 시간을 지정합니다. 이는 플리킹 동작이 원치 않는 효과를 내기 전에 프레스에 반응할 때 유용할 수 있습니다. 지연 시간이 초과되기 전에 사용자가 플릭커블을 드래그하거나 플릭하면 누르기 이벤트가 전달되지 않습니다. 시간 제한 내에 버튼을 놓으면 누르는 동작과 놓는 동작이 모두 전달됩니다.

Pixel aligned Content X 및 Y 필드에 설정된 정렬 단위를 픽셀(true) 또는 서브픽셀(false)로 설정합니다. 정지된 콘텐츠 또는 1픽셀 너비의 선, 텍스트 또는 벡터 그래픽과 같이 대비가 높은 가장자리가 있는 움직이는 콘텐츠에 최적화하려면 true 로 설정합니다. 애니메이션 품질에 맞게 최적화하려면 false 로 설정합니다.

Synchronous drag 을 true 으로 설정하면 마우스 또는 터치포인트가 콘텐츠를 끌기 시작할 만큼 충분히 멀리 이동하면 콘텐츠가 점프하여 누를 때 커서 또는 터치포인트 아래에 있던 콘텐츠 픽셀이 해당 지점 아래에 유지됩니다. 기본값은 false 으로, 처음에 드래그 거리가 일부 손실되는 대신 더 부드러운 경험(점프 없음)을 제공합니다.

플릭 가능한 지오메트리 설정

Flickable Geometry 섹션에서 Content size 필드는 플릭커블로 제어되는 표면의 치수를 지정합니다. 일반적으로 W 및 H 필드의 값을 플리커블에 배치된 컴포넌트의 크기를 합친 값으로 설정합니다. Left margin , Right margin, Top margin, Bottom margin 필드에서 콘텐츠 주위에 추가 여백을 설정할 수 있습니다.

Origin 필드는 콘텐츠의 원점을 지정합니다. 레이아웃 방향에 관계없이 콘텐츠의 왼쪽 상단 위치를 나타냅니다. 일반적으로 X 및 Y 값은 0으로 설정됩니다. 그러나 델리게이트 크기 변화 또는 보이는 영역 외부의 컴포넌트 삽입 또는 제거로 인해 List View 및 Grid View 의 원점이 임의의 위치일 수 있습니다.

기본 인터랙션 방법 요약

다음 표에는 UI에 기본 인터랙션 메서드를 추가하는 데 사용할 수 있는 컴포넌트가 개발자 문서 링크와 함께 나열되어 있습니다. Components > Default Components > Basic 에서 확인할 수 있습니다. MCU 지원 열은 MCU에서 지원되는 컴포넌트를 나타냅니다.