UI에 상호작용 추가

사전 설정된 기본 컴포넌트의 인스턴스를 생성하여, 포인팅 장치나 키보드를 사용한 작업 수행, 화면의 가시 영역을 가로 또는 세로로 휙 스와이프하는 등의 상호작용 방식을 UI에 추가할 수 있습니다. 이러한 컴포넌트는 ‘ Components ’ > ‘ Default Components ’ > ‘ Basic ’에서 확인할 수 있습니다.

또한, 애플리케이션의 진행 상황을 사용자에게 알리거나 사용자로부터 입력을 수집하기 위해 미리 정의된 UI 컨트롤의 인스턴스를 생성할 수 있습니다.

사용자 상호 작용을 위해 다음과 같은 기본 구성 요소를 사용할 수 있습니다:

• 마우스 영역
• 포커스 범위
• 플릭 가능 영역
• 기본 상호작용 방법 요약

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

마우스 영역 생성

신호와 핸들러는 마우스 상호작용을 전달하는 데 사용됩니다. 구체적으로, ‘ Mouse Area ’ 컴포넌트를 사용하여 정의된 영역 내의 마우스 이벤트를 수신하는 JavaScript 콜백(신호 핸들러라고도 함)을 정의할 수 있습니다.

마우스 영역을 정의하는 빠른 방법 중 하나는 컴포넌트를 선택한 다음 컨텍스트 메뉴에서 ‘ Add Mouse Area ’를 선택하는 것입니다. 이렇게 하면 마우스 영역이 부모 영역에 고정됩니다. 부모가 Rectangle (또는 Item에서 파생된 모든 컴포넌트)인 경우, 마우스 영역은 부모의 크기로 정의된 영역을 채웁니다.

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

사전 정의된 신호

마우스 영역은 다양한 마우스 이벤트에 반응하여 신호를 발생시킵니다:

• 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 를 선택하면 트랙패드에서 두 손가락으로 휙 밀기(flick) 제스처와 같이 마우스가 아닌 장치에서 발생하는 스크롤 제스처에 반응합니다. 이 확인란이 선택되지 않은 경우, 휠 이벤트는 휠이 있는 실제 마우스에서 발생한 경우에만 휠 신호가 발송되며, 스크롤 제스처 이벤트는 이를 처리할 다른 구성 요소로 전달됩니다.

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

이벤트 전파

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

이벤트 가로채기 방지

` Mouse Area ` 인스턴스를 ` Flickable`과 같이 자식 마우스 이벤트를 필터링하는 컴포넌트 내에 배치할 수 있습니다. 그러나 부모 컴포넌트에서 플릭(flick)과 같은 제스처가 인식될 경우, ` Mouse Area `에서 마우스 이벤트가 가로채질 수 있습니다.

Mouse Area 인스턴스에서 마우스 이벤트가 가로채지는 것을 방지하려면 Prevent stealing 를 선택하십시오. 컴포넌트가 이미 이벤트 가로채기를 시작한 후 이 값을 설정하면, 다음 press() 이벤트가 발생할 때까지 이 설정은 적용되지 않습니다.

자세한 내용은 MouseArea 를 참조하십시오.

드래그 속성 설정

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

' Axis ' 필드에서 드래그를 수평, 수직 또는 둘 다로 수행할 수 있도록 지정합니다.

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

' Filter children '을 선택하면 드래그 작업이 하위 ' Mouse Area ' 인스턴스를 재정의하도록 할 수 있습니다. 이를 통해, 예를 들어 하위 영역이 클릭을 처리하는 동안 상위 ' Mouse Area ' 인스턴스가 드래그를 처리할 수 있습니다.

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

포커스 범위 설정

키를 누르거나 놓으면 키 이벤트가 생성되어 포커스가 설정된 컴포넌트로 전달됩니다. 활성 포커스가 설정된 컴포넌트가 없는 경우, 키 이벤트는 무시됩니다. 활성 포커스가 설정된 컴포넌트가 키 이벤트를 수락하면 전파가 중지됩니다. 그렇지 않은 경우, 이벤트가 수락되거나 루트 컴포넌트에 도달하여 이벤트가 무시될 때까지 이벤트는 해당 컴포넌트의 상위 컴포넌트로 전달됩니다.

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

Focus Scope 컴포넌트의 인스턴스를 생성하려면 Components > Default Components > Basic 로 이동하십시오.

각 포커스 범위 내에서 하나의 객체만 포커스가 활성화될 수 있습니다. 두 개 이상의 컴포넌트에서 포커스가 활성화된 경우, 포커스를 마지막으로 활성화한 컴포넌트가 포커스를 가지며 나머지는 비활성화됩니다. 이는 포커스 범위가 없는 경우와 유사합니다.

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

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

자세한 내용은 Qt Quick 의 ‘키보드 포커스’를 참조하십시오.

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

Flickable 컴포넌트는 자식 요소를 사용자가 드래그하거나 플릭할 수 있는 표면에 배치하여, 자식 컴포넌트를 표시하는 뷰가 스크롤되도록 합니다. 이 동작은 List View 및 Grid View 와 같이 다수의 자식 컴포넌트를 표시하는 컴포넌트의 기초가 됩니다. 자세한 내용은 목록 뷰(List Views) 및 그리드 뷰( Grid Views)를 참조하십시오.

기존 사용자 인터페이스에서는 사용자가 스크롤 막대나 화살표 버튼과 같은 표준 컨트롤을 사용하여 뷰를 스크롤할 수 있습니다. 때로는 마우스 버튼을 누른 채 커서를 이동하여 뷰를 직접 드래그할 수도 있습니다. 터치 기반 사용자 인터페이스에서는 이러한 드래그 동작에 플릭 동작이 종종 결합되는데, 이 경우 사용자가 뷰에 대한 터치를 멈춘 후에도 스크롤이 계속됩니다.

플릭 가능한 컴포넌트의 클리핑

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 ’를 선택하십시오.

' FollowBoundsBehavior '을 선택하면 ' Behavior ' 필드의 값에 따라 플릭 가능 영역의 경계를 넘어 드래그하거나 플릭할 때 콘텐츠가 따라가도록 할 수 있습니다.

' Press delay ' 필드에서 플릭 가능 요소의 자식 요소에 누름 이벤트가 전달되기까지 지연할 시간을 밀리초 단위로 지정합니다. 이는 플릭 동작이 원치 않는 결과를 초래하기 전에 누름 이벤트에 반응해야 할 때 유용합니다. 지연 시간이 만료되기 전에 사용자가 플릭 가능한 요소를 드래그하거나 플릭하면 누름 이벤트가 전달되지 않습니다. 타임아웃 기간 내에 버튼을 놓으면 누름 및 놓기 이벤트가 모두 전달됩니다.

Pixel aligned Content X 및 필드에 설정된 정렬 단위를 픽셀( ) 또는 서브픽셀( )로 설정합니다. 로 설정하면 정적 콘텐츠나 1픽셀 폭의 선, 텍스트, 벡터 그래픽 등 대비가 높은 가장자리를 가진 움직이는 콘텐츠에 최적화됩니다. 애니메이션 품질을 최적화하려면 로 설정하십시오. Ytruefalse true false

Synchronous drag 가 true 로 설정된 경우, 마우스나 터치 지점이 콘텐츠를 드래그하기 시작할 만큼 충분히 이동하면 콘텐츠가 점프하여, 클릭 시 커서나 터치 지점 아래에 있던 콘텐츠 픽셀이 해당 지점 아래에 그대로 유지됩니다. 기본값은 false 이며, 이는 시작 시 드래그 거리의 일부를 희생하는 대신 더 부드러운 경험(점프 없음)을 제공합니다.

플릭 가능 영역 설정

Flickable Geometry 섹션에서 Content size 필드는 플릭 가능 영역(flickable)이 제어하는 표면의 크기를 지정합니다. 일반적으로 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에서 지원되는 컴포넌트를 나타냅니다.