이 페이지에서

UI 컨트롤 삽입

Components 에서 미리 설정된 UI 컨트롤을 사용할 수 있습니다 > Qt Quick Controls > Controls 에서 사용할 수 있습니다.

‘컴포넌트’ 보기의 Qt Quick Controls 컴포넌트.

사용자 상호 작용을 위해 다음과 같은 유형의 컨트롤을 사용할 수 있습니다:

Properties (프로젝트 > 구성 요소) 뷰에서 구성 요소 인스턴스의 속성 값을 지정할 수 있습니다. 일부 속성은 모든 구성 요소에 공통적으로 적용되는 반면, 일부는 특정 유형의 컨트롤에만 공통적으로 적용됩니다. 또한 특정 컨트롤에서만 사용할 수 있는 속성도 있습니다. 다음 섹션에서는 사전 정의된 UI 컨트롤과 해당 속성에 대해 설명합니다.

일반 컨트롤 속성

Properties (프로젝트 > 구성 요소) 보기에서 컨트롤 속성을 설정할 수 있습니다.

속성 보기의 ‘제어’ 섹션.

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

' Focus policy ' 필드의 값은 컨트롤이 탭 키, 클릭 및 마우스 휠을 통해 포커스를 받을 수 있는지 여부를 결정합니다.

Hover ’ 및 ‘ Wheel ’을 선택하면 컨트롤이 마우스 이벤트를 수신할 수 있게 됩니다. ‘hover’ 값은 하위 구성 요소에 대해 명시적으로 설정되지 않은 한, 모든 하위 구성 요소에 적용됩니다.

참고: Flickable 와 같이 스크롤 가능한 컴포넌트 내의 컨트롤에 대해 휠 이벤트를 활성화할 때는주의해야 합니다 . 컨트롤이 이벤트를 처리하게 되어, 플릭 가능한 컴포넌트의 스크롤이 중단될 수 있기 때문입니다.

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

버튼 컨트롤

Qt Quick Controls 는 특정 사용 사례에 맞는 다양한 버튼형 컨트롤을 제공합니다. 다음 섹션에서는 사용 사례에 가장 적합한 버튼을 선택하는 방법에 대한 지침을 제시하고, ‘ Properties ’ 보기에서 버튼 속성에 설정할 수 있는 값에 대해 설명합니다.

2D 뷰에서 사용되는 다양한 유형의 버튼 컨트롤.

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

  • 라벨은 짧고 간결하게 작성하십시오.
  • 별도의 UI 지침이 없는 한 기본 글꼴을 사용하십시오.
  • 텍스트가 현지화되는 경우, 텍스트가 길어질 때 레이아웃에 미치는 영향을 고려하십시오.

텍스트 속성 설정에 대한 자세한 내용은 ‘문자 속성’‘패딩’을 참조하십시오.

모든 버튼 컨트롤에 공통적으로 적용되는 속성은 다음에서 설명합니다:

버튼

Components 의 인스턴스를 생성할 수 있습니다. > Qt Quick Controls > Controls > Button:

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

버튼 텍스트는 해당 동작을 설명하는 동사이거나, 열릴 팝업의 제목과 일치하는 명사여야 합니다.

상태를 설정하는 데 버튼을 사용하지 마십시오. 이러한 용도에는 스위치(Switch) 가 더 적합합니다.

강조 표시된 버튼

Button 섹션에서 ‘ Highlight ’를 선택하여 사용자의 시선을 버튼으로 유도하세요. 버튼을 강조 표시해도 키보드 상호작용에는 아무런 영향이 없습니다.

버튼 속성.

다음 이미지는 강조 표시된 버튼의 예시입니다:

강조 표시된 버튼.

플랫 버튼

플랫 버튼은 일반적으로 눌리거나 선택되지 않는 한 배경이 표시되지 않습니다. 플랫 버튼을 만들려면 ‘ Button ’ 섹션에서 ‘ Flat ’를 선택하세요.

다음 이미지는 플랫 버튼의 예시입니다:

평평한 단추.

지연 버튼

Delay Button 컨트롤은 동작을 실행하기 전에 지연 시간을 적용합니다. 이 지연 시간은 실수로 버튼을 누르는 것을 방지합니다.

터치 UI에서 또는 신중하게 실행해야 하는 작업에 지연 버튼을 사용하십시오.

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

체크박스

Components 의 인스턴스를 생성할 수 있습니다. > Qt Quick Controls > Controls > Check Box 의 인스턴스를 생성할 수 있습니다:

체크박스는 켜기(선택) 또는 끄기(선택 해제)로 전환할 수 있는 옵션 버튼입니다. 체크박스는 일반적으로 일련의 옵션 중에서 하나 이상의 옵션을 선택하는 데 사용됩니다. 목록과 같이 옵션의 수가 많은 경우에는 대신 Check Delegate 컨트롤의 인스턴스를 생성하는 것을 고려해 보십시오.

델리게이트를 강조 표시하여 사용자의 주의를 끌 수 있습니다. 강조 표시는 키보드 상호 작용에는 영향을 미치지 않습니다. 델리게이트를 강조 표시하려면 ‘ Item Delegate ’ 섹션에서 ‘ Highlight ’을 선택하십시오.

체크박스를 사용하여, '없음'을 포함하여 원하는 수의 옵션을 선택할 수 있지만, 옵션들이 서로 배타적이지 않은 다중 선택 옵션 목록을 구성할 수 있습니다.

대화 상자에서 사용자가 서비스 약관에 동의해야 하는 경우와 같이 ‘예/아니오’ 선택이 필요한 경우에는 단일 체크박스를 사용하십시오. 단일 ‘예/아니오’ 선택의 경우 스위치(Switch)를 사용할 수도 있습니다. 사용자가 여러 옵션 중에서 선택하는 경우에는 체크박스를 사용하고, 수행할 작업 중에서 선택하는 경우에는 스위치를 사용하는 것이 좋습니다.

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 ’를 선택하여 델리게이트를 강조 표시하세요.

스위치를 토글한 직후 즉시 효과가 나타나는 이진 작업에는 스위치를 사용하십시오. 예를 들어, Wi-Fi를 켜거나 끄는 데 스위치를 사용하십시오.

둥근 버튼

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:

FromTo 필드에서 슬라이더 또는 다이얼의 범위를 설정합니다. Value 필드에서 슬라이드 핸들 또는 다이얼의 값을 설정합니다. 범위 슬라이더의 경우, Value 1Value 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 는 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에서 지원되는 컨트롤을 나타냅니다.

아이콘이름MCU 지원용도
‘바쁨 표시기’ 컴포넌트Busy Indicator없음콘텐츠가 로드되는 동안 활동을 나타냅니다.
Button 컴포넌트Button어떤 동작과 연결할 수 있는 푸시 버튼입니다.
체크박스 컴포넌트Check Box켜기(선택) 또는 끄기(선택 해제)로 전환할 수 있는 옵션 버튼입니다.
체크박스 컴포넌트Check Delegate아니요켜기(선택) 또는 끄기(선택 해제)로 전환할 수 있는 항목 델리게이트입니다.
콤보 박스 컨트롤Combo Box아니요데이터 모델을 사용하여 내용이 채워지는 버튼과 팝업 목록이 결합된 요소입니다.
'지연' 버튼 컴포넌트Delay Button아니요충분히 오래 누르고 있으면 작동하는 옵션 버튼입니다.
Dial 컴포넌트Dial값을 설정하기 위해 회전하는 원형 다이얼입니다.
페이지 표시기 컴포넌트Page Indicator아니요여러 페이지로 구성된 컨테이너에서 현재 활성화된 페이지를 나타냅니다.
진행률 표시줄 컴포넌트Progress Bar작업의 진행 상황을 나타냅니다.
라디오 버튼 컴포넌트Radio Button켜기(선택) 또는 끄기(선택 해제)로 전환할 수 있는 옵션 버튼입니다.
라디오 버튼 컴포넌트Radio Delegate아니요켜기(선택) 또는 끄기(선택 해제)로 전환할 수 있는 항목 델리게이트입니다.
범위 슬라이더 컴포넌트Range Slider아니요사용자가 트랙을 따라 두 개의 핸들을 슬라이드하여 값의 범위를 선택할 수 있게 합니다.
Round Button 컴포넌트Round Button아니요모서리가 둥근 푸시 버튼으로, 특정 동작과 연결할 수 있습니다.
Slider 컴포넌트Slider사용자가 트랙을 따라 핸들을 밀어서 값을 선택할 수 있게 합니다.
Spin Box 컴포넌트Spin Box아니요사용자가 위/아래 버튼을 클릭하거나, 키보드의 위/아래 화살표 키를 누르거나, 입력란에 값을 직접 입력하여 값을 지정할 수 있습니다.
Switch 컴포넌트Switch켜거나 끌 수 있는 옵션 버튼입니다.
Switch 컴포넌트Switch Delegate아니요켜거나 끌 수 있는 스위치 표시기가 있는 항목 델리게이트입니다.
툴바 컴포넌트Tab Bar아니요사용자가 서로 다른 보기나 하위 작업 간에 전환할 수 있게 해줍니다.
Tab Button 컴포넌트Tab ButtonButton 와 기능은 유사하지만, Tab Bar 에 더 적합한 외관을 제공하는 버튼입니다.
툴바 컴포넌트Tool Bar아니요탐색 버튼 및 검색 필드와 같이 애플리케이션 전반에 걸쳐 사용되며 상황에 따라 달라지는 동작과 컨트롤을 포함하는 컨테이너입니다.
Tab Button 컴포넌트Tool Button아니요Button 와 기능은 비슷하지만, Tool Bar 에 더 적합한 디자인을 제공하는 버튼입니다.
Tool Separator 구성 요소Tool Separator아니요Tool Bar 에서 항목 그룹을 인접한 항목들과 구분해 줍니다.
Tumbler 컴포넌트Tumbler아니요선택할 수 있는 항목들이 회전 가능한 휠 형태로 표시됩니다.

참조 : UI 구성 요소 사용 방법, Qt Quick UI 디자인, Qt Quick UI 디자인.

Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.