UI 컨트롤 삽입

사전 설정 UI 컨트롤은 Components > > Qt Quick Controls > Controls 에서 사용할 수 있습니다.

사용자 상호작용에 사용할 수 있는 컨트롤 유형은 다음과 같습니다:

• 버튼 컨트롤
• 표시기
• 선택기
• 탭 모음
• 도구 모음
• UI 컨트롤 요약

Properties 보기에서 컴포넌트 인스턴스의 속성에 대한 값을 지정할 수 있습니다. 일부 속성은 모든 컴포넌트에 공통인 반면, 일부 속성은 특정 유형의 컨트롤에 공통입니다. 일부 속성은 특정 컨트롤에만 사용할 수 있습니다. 다음 섹션에서는 사전 설정된 UI 컨트롤과 해당 속성에 대해 설명합니다.

일반 컨트롤 속성

Properties 보기에서 컨트롤 속성을 설정할 수 있습니다.

Enable 확인란은 컨트롤이 활성화되어 있는지 여부를 나타냅니다.

Focus policy 필드의 값은 탭, 클릭 및 마우스 휠을 사용하여 컨트롤이 포커스를 허용할지 여부를 결정합니다.

Hover 및 Wheel 을 선택하면 컨트롤이 마우스 이벤트를 수락하도록 설정할 수 있습니다. 마우스오버 값은 명시적으로 설정되지 않은 한 모든 자식 컴포넌트에 전파됩니다.

Spacing 는 여러 개 또는 반복적인 빌딩 블록이 있는 컨트롤에 유용합니다. 예를 들어, 일부 스타일은 간격을 사용하여 텍스트와 체크 박스의 표시기 사이의 거리를 결정합니다. 간격은 컨트롤에 의해 강제되지 않으므로 각 스타일마다 다르게 해석될 수 있으며 일부는 완전히 무시할 수도 있습니다.

버튼 컨트롤

Qt Quick Controls 는 특정 사용 사례에 맞는 버튼형 컨트롤을 제공합니다. 다음 섹션에서는 사용 사례에 가장 적합한 버튼을 선택하기 위한 가이드라인과 Properties 보기에서 버튼 속성에 설정할 수 있는 값에 대해 설명합니다.

텍스트가 포함된 버튼에 대한 권장 사항

• 레이블은 짧고 간결하게 유지합니다.
• 달리 명시된 UI 가이드라인이 없는 한 기본 글꼴을 사용하세요.
• 텍스트가 현지화된 경우 긴 텍스트가 레이아웃에 어떤 영향을 미치는지 고려하세요.

텍스트 속성 설정에 대한 자세한 내용은 문자 속성 및 패딩을 참조하세요.

모든 버튼 컨트롤에서 공유되는 속성은 에 설명되어 있습니다:

• 텍스트 및 아이콘 표시
• 확인 가능한 버튼
• 버튼 신호

버튼

Components > >의 인스턴스를 만들 수 있습니다. Qt Quick Controls > Controls > Button:

버튼은 사용자가 누르거나 클릭할 수 있습니다. 일반적으로 버튼은 작업을 수행하거나 질문에 답하는 데 사용됩니다. 예를 들어 확인, 적용, 취소, 닫기, 예, 아니요, 도움말 등이 있습니다.

버튼 텍스트는 작업을 설명하는 동사 또는 열릴 팝업의 제목과 일치하는 명사이어야 합니다.

상태 설정에는 스위치가 더 적합하므로 버튼을 사용하여 상태를 설정하지 마세요.

강조 표시된 버튼

Button 섹션에서 Highlight 을 선택하여 사용자의 주의를 버튼으로 유도합니다. 버튼을 강조 표시해도 키보드 상호작용에는 영향을 미치지 않습니다.

다음 이미지는 강조 표시된 버튼의 예를 보여줍니다:

플랫 버튼

플랫 버튼은 일반적으로 누르거나 선택하지 않는 한 배경을 그리지 않습니다. 플랫 버튼을 만들려면 Button 섹션에서 Flat 을 선택합니다.

다음 이미지는 플랫 버튼의 예를 보여줍니다:

지연 버튼

Delay Button 컨트롤에는 동작을 트리거하기 전에 지연이 통합되어 있습니다. 이 지연은 실수로 누르는 것을 방지합니다.

터치 UI와 신중하게 트리거해야 하는 동작에는 지연 버튼을 사용하세요.

지연은 Delay 필드에서 밀리초 단위로 설정할 수 있습니다.

확인란

Components > > > > > > : 인스턴스를 만들 수 있습니다. Qt Quick Controls > Controls > Check Box:

확인란은 켜거나(선택) 끌 수 있는 옵션 버튼을 표시합니다(선택 해제). 체크박스는 일반적으로 옵션 세트에서 하나 이상의 옵션을 선택하는 데 사용됩니다. 목록과 같이 더 큰 옵션 집합의 경우 Check Delegate 컨트롤의 인스턴스를 만드는 것이 좋습니다.

델리게이트는 사용자의 주의를 끌기 위해 강조 표시할 수 있습니다. 강조 표시는 키보드 상호 작용에는 영향을 주지 않습니다. Item Delegate 섹션에서 Highlight 을 선택하여 델리게이트를 강조 표시합니다.

확인란을 사용하여 옵션을 선택하지 않는 것을 포함하여 원하는 수의 옵션을 선택할 수 있는 다중 선택 옵션 목록을 만들 수 있지만 옵션이 상호 배타적이지는 않습니다.

사용자가 대화 상자에서 서비스 이용 약관에 동의해야 하는 경우와 같이 예/아니요를 선택하려면 단일 확인란을 사용합니다. 단일 예/아니요 선택의 경우 스위치를 사용할 수도 있습니다. 사용자가 옵션 중에서 선택하는 경우에는 확인란을 사용합니다. 수행해야 할 작업 중에서 선택하는 경우에는 스위치를 사용하는 것이 좋습니다.

Button Content 섹션의 Checked 값에 따라 확인란의 상태가 결정됩니다. 그러나 확인란에는 선택된 상태와 선택되지 않은 상태 외에도 세 번째 상태인 부분적으로 선택된 상태가 있습니다.

Check Box 섹션에서 Tri-state 을 선택하면 사용자가 터치, 마우스 또는 키보드를 사용하여 토글할 때 체크박스가 체크됨, 부분 체크됨 및 체크되지 않음 상태 사이를 순환하도록 설정할 수 있습니다.

옵션을 그룹화할 수 있는 경우 부분적으로 체크된 확인란을 사용하여 전체 그룹을 나타낼 수 있습니다. Check state 필드에 PartiallyChecked 을 선택하면 사용자가 그룹에서 일부 하위 구성 요소를 선택했지만 전체 구성 요소는 선택하지 않았음을 나타냅니다.

선택 가능한 옵션은 세로로 나열되는 경우가 많습니다.

확인란 레이블은 확인 표시가 있으면 참이 되고 확인 표시가 없으면 거짓이 되는 문장이어야 합니다. 따라서 확인란 레이블에는 부정적인 문장이 포함되어서는 안 됩니다.

라디오 버튼

Radio Button 은 켜거나(체크) 끌 수 있는 옵션 버튼입니다(체크 해제). 라디오 버튼은 일반적으로 옵션 집합에서 하나의 옵션을 선택하는 데 사용됩니다. 옵션을 선택하면 이전 선택 항목이 자동으로 지워집니다.

상호 배타적인 옵션이 두 개만 있는 경우에는 이를 하나의 확인란 또는 스위치로 결합합니다.

Radio Delegate 는 일반적으로 보기에서 사용된다는 점을 제외하면 라디오 버튼과 유사합니다.

Radio Delegate 섹션에서 Highlight 을 선택하여 위임자를 강조 표시합니다.

라디오 버튼에 대한 권장 사항입니다:

• 라벨 텍스트는 한 줄로 제한합니다.
• 합리적인 기본 옵션이 선택되어 있는지 확인합니다.
• 라디오 버튼 옵션을 세로로 나열합니다.
• 목록을 짧게 유지합니다.
• 혼동을 피하기 위해 두 개의 라디오 버튼 그룹을 나란히 배치하지 마세요.

스위치

Components > > Qt Quick Controls > Controls > Switch:

스위치는 드래그하거나 켜기(체크) 또는 끄기(체크 해제)로 전환할 수 있는 옵션 버튼입니다. 스위치는 일반적으로 켜짐 또는 꺼짐의 두 가지 상태 중 하나를 선택하는 데 사용됩니다. 목록과 같이 더 큰 옵션 집합의 경우 Switch Delegate 을 대신 사용하는 것이 좋습니다.

Item Delegate 섹션에서 Highlight 을 선택하여 위임자를 강조 표시합니다.

스위치를 전환한 후 즉시 적용되는 이진 작업에는 스위치를 사용합니다. 예를 들어 스위치를 사용하여 WiFi를 켜거나 끕니다.

원형 버튼

Round Button 은 작업을 시작하거나 팝업을 열거나 닫는 클릭 가능한 컨트롤입니다. 정사각형 이미지 아이콘 또는 한 글자 글꼴 아이콘이 있는 둥근 버튼은 원형입니다. 원형 원형 버튼은 일반 버튼보다 공간을 덜 차지하며 플로팅 액션 버튼으로도 사용할 수 있습니다.

원형 버튼에는 일반적인 버튼 속성 외에도 버튼의 반지름을 나타내는 Radius 속성이 있습니다.

모서리가 약간 둥근 비교적 정사각형 버튼을 만들려면 3과 같은 작은 값을 사용합니다.

완전히 원형 버튼을 만들려면 버튼 너비 또는 높이의 절반에 해당하는 값을 사용하고 버튼의 너비와 높이를 동일하게 만듭니다.

텍스트 및 아이콘 표시

버튼에는 텍스트, 아이콘 또는 둘 다를 포함할 수 있습니다. Button Content 섹션의 Text 필드에 버튼 텍스트를 지정합니다. Display 필드의 값에 따라 텍스트 또는 아이콘만 표시할지, 둘 다 표시되는 경우 텍스트가 아이콘 옆이나 아래에 배치될지 여부가 결정됩니다.

확인 가능한 버튼

선택 가능한 버튼은 버튼에 활성 초점이 있는 상태에서 사용자가 해당 버튼을 선택하거나 스페이스바를 누르면 선택(켜짐)과 선택 해제(꺼짐) 간에 전환됩니다. Checkable 을 선택하여 버튼을 체크 표시할 수 있도록 설정합니다. 버튼을 체크 표시하려면 Checked 을 선택합니다.

동일한 상위 컴포넌트에 속한 버튼은 상호 배타적일 수 있습니다. 사용자가 버튼을 선택하여 확인하면 이전 선택 항목이 지워집니다. 사용자는 현재 선택된 버튼을 클릭하여 선택을 취소할 수 없습니다. 대신 그룹에서 다른 버튼을 선택하여 해당 그룹에 대해 새로 체크된 버튼을 설정해야 합니다.

라디오 버튼과 탭 버튼은 기본적으로 상호 배타적입니다. 다른 유형의 버튼을 상호 배타적으로 설정하려면 Exclusive 을 선택합니다.

버튼이 같은 부모에 속하지 않는 경우 버튼을 선택하거나 선택 취소해도 그룹의 다른 버튼에는 영향을 주지 않습니다.

버튼 신호

버튼은 사용자가 활성화하면 clicked() 신호를 방출합니다. 이 신호에 연결하여 버튼의 동작을 수행합니다. 버튼은 다음과 같은 추가 신호를 제공합니다: canceled(), doubleClicked(), pressed(), released(), 그리고 길게 누를 경우 pressAndHold().

Auto-repeat 을 선택하면 버튼을 길게 누르고 있는 동안 pressed(), released(), clicked() 신호가 반복됩니다. pressAndHold() 신호는 발신되지 않습니다.

표시기

Qt Quick Controls 는 특정 사용 사례에 맞게 사용 중 표시기, 페이지 표시기, 진행률 표시줄 등 표시기와 유사한 컨트롤을 선택할 수 있습니다. 다음 섹션에는 사용 사례에 가장 적합한 표시기를 선택하기 위한 가이드라인이 나와 있습니다.

사용 중 표시기

Busy Indicator 는 작업이 진행 중이며 UI가 작업이 완료될 때까지 기다려야 함을 나타냅니다.

사용 중 표시기는 불확정 진행률 표시줄과 유사합니다. 둘 다 백그라운드 활동을 나타내는 데 사용할 수 있습니다. 가장 큰 차이점은 시각적이라는 점과 진행률 표시줄은 구체적인 진행률(확인 가능한 경우)을 표시할 수 있다는 점입니다. 시각적인 차이로 인해 사용 중 표시기와 불확정 진행률 표시줄은 UI의 다른 위치에 적합합니다.

Running 을 선택하여 사용 중 표시기를 표시합니다.

진행 상황을 실시간으로 업데이트하려면 Live 을 선택합니다.

바쁨 표시기가 표시되는 일반적인 위치는 다음과 같습니다:

• Tool Bar.
• Page.
• 의 측면에 Item Delegate.

페이지 표시기

Page Indicator 는 여러 페이지로 구성된 컨테이너에서 현재 활성 페이지를 표시하는 데 사용됩니다. Count 필드에 페이지 수를 지정합니다. Current 필드에서 현재 페이지를 선택합니다.

Interactive 을 선택하면 페이지 표시기가 누름에 반응하고 그에 따라 Current 필드의 값이 자동으로 변경됩니다.

페이지 표시기는 일반적으로 사용자가 UI의 실제 콘텐츠에 집중하지 못하게 하기 위해 매우 작게 표시됩니다. 따라서 클릭하기 어려울 수 있으며 사용자가 대화형이라는 것을 쉽게 인식하지 못할 수 있습니다. 이러한 이유로 페이지 표시기는 Swipe View 와 같은 기본 탐색 방법을 보완하는 데 사용하는 것이 가장 좋으며, 이를 대체해서는 안 됩니다.

진행률 표시줄

Progress Bar 는 작업의 진행률을 나타냅니다. Value 필드에 초기 값을 지정할 수 있지만 정기적으로 업데이트해야 합니다. From 및 To 필드에 범위를 지정하며, 두 필드 모두 임의의 값을 포함할 수 있습니다.

다운로드 중인 항목의 크기를 확인할 수 없거나 네트워크 장애로 인해 다운로드 진행이 중단될 수 있는 경우 Indeterminate 을 선택합니다.

불확정 모드는 백그라운드 활동을 표시하는 데 사용할 수 있다는 점에서 사용 중 표시기와 유사합니다. 시각적인 차이로 인해 불확정 진행률 표시줄과 사용 중 표시기는 UI의 다른 위치에 배치됩니다.

불확정 진행률 표시줄의 일반적인 위치는 다음과 같습니다:

• Tool Bar 의 하단
• Page 의 콘텐츠 내 인라인
• 특정 항목의 진행률을 표시하는 Item Delegate.

선택기

Qt Quick Controls 는 특정 사용 사례를 위해 슬라이더, 다이얼, 회전 상자, 콤보 상자, 텀블러 등 선택기와 유사한 컨트롤 세트를 제공합니다. 다음 섹션에는 사용 사례에 가장 적합한 선택기를 선택하기 위한 가이드라인이 나와 있습니다.

슬라이더 및 다이얼

Components > > Qt Quick Controls > Controls > Slider:

슬라이더는 트랙을 따라 핸들을 밀어서 값을 선택하는 데 사용되는 반면, Range Slider 은 트랙을 따라 각 핸들을 밀어서 두 개의 값으로 지정된 범위를 선택하는 데 사용됩니다.

Dial 는 스테레오나 산업용 장비와 같은 장치에서 볼 수 있는 기존의 다이얼 노브와 유사합니다. 사용자가 범위 내에서 값을 지정할 수 있습니다.

Components > > Qt Quick Controls > Controls > Dial:

From 및 To 필드에서 슬라이더 또는 다이얼의 범위를 설정합니다. Value 필드에서 슬라이드 핸들 또는 다이얼의 값을 설정합니다. 범위 슬라이더의 경우 Value 1 및 Value 2 필드에서 첫 번째 및 두 번째 핸들의 초기 위치를 설정합니다. Live 을 선택하여 값 속성의 실시간 업데이트를 제공합니다.

Snap mode 필드에서 Step size 필드의 값과 관련하여 슬라이더 핸들 또는 다이얼이 작동하는 방식을 설정합니다. 기본적으로 단계 크기에 맞춰 스냅되지 않지만 드래그하는 동안 또는 드래그한 후 놓았을 때 스냅되도록 설정할 수 있습니다.

Orientation 필드에서 슬라이더 방향을 가로 또는 세로로 설정할 수 있습니다.

Drag threshold 을 수정하여 터치 드래그 이벤트가 시작되는 임계값을 결정합니다.

자세한 내용은 다음 동영상을 참조하세요:

다이얼은 원형, 수평 및 수직 입력 모드를 지원합니다. 빠른 입력이 중요한 애플리케이션에서는 다이얼을 클릭하면 해당 위치로 바로 이동할 수 있는 원형 입력 모드가 유용합니다. 정확한 입력이 중요한 애플리케이션의 경우 다이얼을 클릭한 위치에 따라 미세하게 조정할 수 있는 수평 및 수직 입력 모드를 사용하는 것이 좋습니다. 이러한 모드는 오디오 볼륨을 조절하는 다이얼과 같이 값이 크게 점프하면 안전하지 않을 수 있는 다이얼에도 더 적합합니다. Input mode 필드에서 입력 모드를 설정합니다.

스핀 박스

Components > Qt Quick Controls > Controls > Spin Box:

스핀 박스를 사용하면 위쪽 또는 아래쪽 표시기 버튼을 클릭하거나 키보드의 위쪽 또는 아래쪽을 눌러 정수 값을 선택할 수 있습니다. Editable 을 선택하면 사용자가 입력 필드에 텍스트 값을 입력할 수 있습니다.

다른 회전 상자 속성은 Dial 과 유사합니다.

콤보 상자

Combo Box 는 버튼과 팝업 목록이 결합된 형태입니다. 최소한의 화면 공간을 차지하는 방식으로 사용자에게 옵션 목록을 표시하는 수단을 제공합니다.

콤보 상자는 정적 여러 줄 드롭다운 목록에서 값을 선택하는 데 사용됩니다. 사용자는 새 값을 추가할 수 없으며 하나의 옵션만 선택할 수 있습니다.

콤보 상자 값은 데이터 모델에 의해 제공됩니다. 데이터 모델은 일반적으로 JavaScript 배열, ListModel 또는 정수이지만 다른 유형의 데이터 모델도 지원됩니다.

Editable 을 선택하면 모델에서 사용할 수 있는 내용에 따라 콤보 상자 텍스트가 자동으로 완성됩니다.

여러 개의 명명된 역할이 있는 모델을 사용하는 경우 Text role 필드에 Display text 속성의 역할을 지정합니다. 텍스트 역할에 해당하는 모델 항목의 역할을 사용하려면 필드에 valueRole 을 입력합니다.

Current index 필드에는 콤보 상자에 표시되는 항목의 색인이 포함됩니다. 기본값은 콤보 상자가 비어 있는 경우 -1, 그렇지 않은 경우 0 입니다.

플랫 콤보 상자는 상호 작용하지 않는 한 배경을 그리지 않으므로 UI와 조화를 이룹니다. 예를 들어 도구 모음에서 플랫 콤보 상자를 사용하면 도구 버튼의 평면 모양과 일치시킬 수 있습니다. 플랫 콤보 상자를 만들려면 Flat 을 선택합니다.

콤보 상자 권장 사항:

• 값의 수가 매우 많으면 필터를 적용하는 것이 좋습니다.
• 값의 수가 적은 경우에는 사용자가 모든 옵션을 동시에 볼 수 있도록 라디오 버튼을 사용하는 것이 좋습니다.
• 가장 자주 선택될 것으로 예상되는 값을 기본값으로 설정하세요.

텀블러

Tumbler 를 사용하면 사용자가 회전 가능한 항목 휠에서 옵션을 선택할 수 있습니다. 예를 들어 라디오 버튼과 같이 사용할 옵션이 너무 많아서 편집 가능한 스핀 박스를 사용해야 할 옵션이 너무 적을 때 유용합니다. 키보드를 사용할 필요가 없고 항목 수가 많을 때 양쪽 끝을 감싸기 때문에 편리합니다.

Visible count 필드에 표시되는 옵션의 수를 지정합니다. Current index 필드에서 현재 옵션의 색인을 선택합니다.

줄 바꿈을 사용하려면 Wrap 을 선택합니다.

탭 모음

Tab Bar 는 사용자가 여러 보기 또는 하위 작업 간에 전환할 수 있는 탭 기반 탐색 모델을 제공합니다. 탭 모음은 일반적으로 ApplicationWindow 의 머리글 또는 바닥글로 사용됩니다. Position 필드에서 도구 모음 위치를 선택합니다.

일반적으로 탭 모음에는 하위 항목으로 정의된 Tab Button 컨트롤의 정적 집합이 포함됩니다. Container 섹션의 Current index 필드에는 현재 탭 버튼의 색인이 표시됩니다. 기본값은 탭 표시줄이 비어 있는 경우 -1, 그렇지 않은 경우 0 입니다.

Content size 필드에서 콘텐츠 너비(W)와 높이(H)를 지정할 수 있습니다.

버튼의 전체 너비가 탭 표시줄의 사용 가능한 너비를 초과하는 경우 버튼은 자동으로 플릭할 수 있게 됩니다.

도구 모음

Tool Bar 에는 탐색 버튼 및 검색 필드와 같은 애플리케이션 전체 및 상황에 맞는 작업과 컨트롤이 포함되어 있습니다. 툴바는 일반적으로 ApplicationWindow 의 머리글 또는 바닥글로 사용됩니다. Position 필드에서 툴바 위치를 선택합니다.

Tool Button 버튼과 거의 동일하지만 그래픽 모양이 도구 모음에 삽입하기에 더 적합합니다.

툴바는 자체 레이아웃을 제공하지 않으며, 예를 들어 RowLayout 을 만들어 콘텐츠 위치를 지정해야 합니다. 툴바에 항목이 하나만 포함되어 있으면 암시적인 항목 크기에 맞게 크기가 조정됩니다. 따라서 툴바는 레이아웃과 함께 사용하기에 특히 적합합니다. 그러나 Pane 섹션의 Content size 필드에서 콘텐츠 너비(W)와 높이(H)를 지정할 수 있습니다.

Tool Separator 도구 모음에서 항목 그룹을 선으로 구분하여 시각적으로 구분하는 데 사용됩니다. Orientation 필드의 값을 설정하여 가로 또는 세로 도구 모음에서 사용할 수 있습니다.

스타일링 컨트롤

미리 설정된 UI 컨트롤에 스타일을 지정할 수 있습니다. 2D 보기는 구성 파일(qtquickcontrols2.conf)에서 기본 스타일을 읽습니다. 스타일을 변경하려면 기본 도구 모음의 목록에서 다른 스타일을 선택합니다. 이렇게 하면 사용 가능한 스타일을 사용할 때 UI가 어떻게 보이는지 확인할 수 있습니다.

나만의 스타일을 정의하고 디자인 모드에서 사용하는 예는 Qt Quick Controls - 플랫 스타일을 참조하세요.

특정 컨트롤을 사용자 지정하는 방법에 대한 자세한 내용은 사용자 지정 참조를 참조하세요.

UI 컨트롤 요약

다음 표에는 사전 설정된 UI 컨트롤과 해당 개발자 문서 링크가 나열되어 있습니다. 이러한 컨트롤은 Components > Qt Quick Controls. MCU 지원 열은 MCU에서 지원되는 컨트롤을 나타냅니다.