UI에 텍스트 추가

여러 가지 텍스트 컴포넌트를 사용하여 제목이나 레이블, 플레이스홀더 텍스트가 있는 텍스트 입력 필드와 같은 읽기 전용 또는 편집 가능한 텍스트를 UI에 추가할 수 있습니다. Text 컴포넌트는 서식이 지정된 텍스트를 추가하고, Text Edit 컴포넌트는 여러 줄 편집 기능을 추가하며, Text Input 컴포넌트는 편집 가능한 단일 줄 필드를 추가합니다.

사용할 글꼴을 선택하고 포인트 또는 픽셀 단위의 크기, 스타일 이름, 강조, 정렬 및 간격과 같은 각 텍스트 문자열에 대한 광범위한 속성을 지정할 수 있습니다.

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

배경이 있는 레이블을 만들려면 Components > >에서 제공되는 Label 컴포넌트를 사용합니다. Qt Quick Controls. 이 모듈에는 Text Field 및 Text Area 컨트롤을 만들기 위한 컴포넌트도 포함되어 있습니다. 이러한 컴포넌트는 공통 스타일이 적용되고 플레이스홀더 텍스트를 지정할 수 있다는 점에서 기본 컴포넌트와 다릅니다.

서식 있는 텍스트 사용

Text 및 Text Input 컴포넌트에서 서식 있는 텍스트를 사용할 수 있습니다. 서식 있는 텍스트 편집기를 열려면 Properties > Character > Text 에서 (Edit) 버튼을 선택합니다.

서식 있는 텍스트 편집기에서 다음을 수행할 수 있습니다:

• 텍스트를 강조 표시합니다.
• 하이퍼링크를 생성합니다.
• 텍스트를 정렬합니다.
• 글머리 기호 및 번호 매기기 목록을 생성합니다.
• 텍스트 색상을 지정합니다.
• 텍스트 글꼴을 선택합니다.
• 글꼴 크기를 설정합니다.
• 표를 생성합니다.

번역할 문자열 표시

번역기를 지원하려면 번역할 문자열을 표시하세요. Properties > Character > Text 에서 tr 을 선택합니다.

기본적으로 텍스트 문자열은 qsTr() 호출로 묶입니다.

일반 텍스트 대신 텍스트 ID를 사용하는 경우 기본 호출을 qsTrId() 로 변경합니다. Edit > Preferences > Qt Quick > Qt Quick Designer를 선택한 다음 Internationalization 그룹에서 qsTrId() 라디오 버튼을 선택합니다. 자세한 내용은 텍스트 ID 기반 번역을 참조하세요.

텍스트를 편집할 때 컨텍스트를 유지하거나 텍스트 속성에 바인딩을 설정하여 컨텍스트를 변경하려면 qsTranslate() 라디오 버튼을 선택하여 기본 호출을 qsTranslate() 로 변경합니다.

자세한 내용은 번역용 소스 코드 작성하기를 참조하세요.

문자 속성

Properties 의 Character 섹션에서 글꼴 속성을 설정할 수 있습니다. Text 필드에 입력하는 각 문자열에 대해 Font 필드에서 사용할 글꼴을 선택하고 텍스트의 크기, 강조, 정렬 및 간격을 지정할 수 있습니다. Size 필드에서 글꼴 크기를 포인트 또는 픽셀 단위로 지정합니다.

Font 필드에 있는 사용 가능한 글꼴 목록에 사용자 정의 글꼴을 표시하려면 먼저 자산에 글꼴을 추가해야 합니다:

1. Assets > 을 선택합니다.
2. 글꼴 파일을 선택한 다음 Open 을 선택합니다.
3. Add Resources 대화 상자에서 파일을 저장할 위치를 선택합니다.
4. OK 을 선택합니다.

Weight 필드에서 미리 정의된 굵게와 굵게 사이의 값 목록에서 글꼴 굵기를 선택할 수 있습니다. Emphasis 그룹의 버튼을 사용하여 굵게, 이탤릭체, 밑줄 또는 취소선으로 텍스트 서식을 지정할 수도 있습니다.

Style name 필드에 스타일 이름을 설정하면 Weight 및 Emphasis 필드에 설정된 값 대신 스타일 이름과 일치하는 글꼴이 적용됩니다.

Word spacing 필드의 값은 개별 단어 사이의 기본 간격을 변경하는 반면 Letter spacing 필드의 값은 단어의 개별 문자 간격을 변경합니다. 양수 값은 해당 픽셀만큼 간격을 늘리고 음수 값은 간격을 줄입니다.

Line height 필드의 값은 텍스트의 줄 높이를 설정합니다. Text Extras 섹션의 Line height mode 필드에서 FixedHeight 을 선택하여 줄 높이를 픽셀 단위로 설정하거나 ProportionalHeight (기본값)을 선택하여 줄에 비례하여 간격을 설정합니다(승수로). 예를 들어 두 배 간격으로 설정하려면 2로 설정합니다.

텍스트 정렬

텍스트 구성 요소를 가로 및 세로로 정렬할 수 있습니다. 기본적으로 텍스트는 상단에 세로로 정렬됩니다. 가로 맞춤은 텍스트의 자연스러운 정렬을 따릅니다. 기본적으로 영어와 같은 왼쪽에서 오른쪽 텍스트는 텍스트 영역의 왼쪽에 정렬되고 아랍어와 같은 오른쪽에서 왼쪽 텍스트는 텍스트 영역의 오른쪽에 정렬됩니다.

텍스트를 왼쪽, 오른쪽, 위쪽 또는 아래쪽으로 정렬하고 가로 또는 세로로 가운데에 맞출 수 있습니다. 가로 텍스트는 맞춤 설정할 수 있습니다.

한 줄의 텍스트의 경우 텍스트의 크기는 텍스트 영역의 크기입니다. 이 일반적인 경우 모든 정렬은 동일합니다. 부모에서 텍스트를 가운데에 배치하려면 앵커링을 사용하거나 텍스트 컴포넌트의 너비를 부모의 너비에 바인딩합니다. 자세한 내용은 바인딩 설정을 참조하세요.

텍스트 및 스타일 색상

텍스트 자체의 색상과 텍스트 스타일에 사용되는 보조 색상을 설정할 수 있습니다.

Text Edit 및 Text Input 구성 요소의 경우 선택된 텍스트의 색상과 Selected text color 및 Selection color 필드에서 선택 영역 뒤에 사용되는 텍스트 강조 표시 색상을 설정할 수도 있습니다.

Text Field 및 Text Area 컨트롤의 경우 플레이스홀더 텍스트의 색상을 설정할 수도 있습니다.

색상 선택에 대한 자세한 내용은 색상 선택을 참조하세요. 텍스트 컴포넌트에는 단색만 설정할 수 있습니다.

고급 텍스트 속성

텍스트 컴포넌트의 높이와 너비는 설정한 속성 값에 따라 자동으로 결정되며, 예를 들어 Text 필드에 지정한 문자열의 길이와 글꼴 크기를 수용합니다. Text Extras 섹션에서 텍스트 서식을 지정하기 위한 추가 속성을 지정할 수 있습니다.

Size mode 필드의 값은 표시되는 텍스트의 글꼴 크기가 결정되는 방식을 지정합니다. Character 섹션의 Size 필드에 지정된 크기를 픽셀 또는 포인트 단위로 사용하려면 FixedSize 을 선택합니다.

컴포넌트의 너비 또는 높이에 맞는 지정된 크기까지 가장 큰 크기를 사용하려면 HorizontalFit 또는 VerticalFit 을 선택합니다. 컴포넌트의 너비와 높이에 맞는 지정된 크기까지 가장 큰 크기를 사용하려면 Fit 을 선택합니다. 맞춤 텍스트의 글꼴 크기에는 Min size 필드에 지정된 최소값과 Size 필드에 지정된 최대값이 있습니다.

텍스트 줄 바꾸기 및 줄 바꿈

Wrap mode 필드에서 텍스트 컴포넌트의 너비에 맞게 텍스트를 줄 바꿈할 수 있습니다. 텍스트 컴포넌트에 명시적인 너비를 설정한 경우에만 텍스트가 줄 바꿈됩니다. 기본적으로 텍스트는 줄 바꿈되지 않습니다. 단어 경계로만 줄 바꿈을 제한하려면 WordWrap 을 선택합니다. WrapAnywhere 을 선택하면 단어 중간에 있는 경우에도 줄의 모든 지점에서 줄 바꿈을 사용할 수 있습니다. 가능하면 단어 경계에서 줄 바꿈을 하거나 단어 중간에 있더라도 줄의 적절한 지점에서 줄 바꿈을 하려면 Wrap 을 선택합니다.

Elide 속성을 Wrap 옵션과 함께 사용하여 일반 텍스트 한 줄을 설정된 너비에 맞출 수 있습니다. ElideRight 을 선택하고 Max line count 또는 텍스트 컴포넌트 높이( H 필드에서)를 설정합니다. 두 가지를 모두 설정하면 허용된 높이에 맞지 않는 한 최대 줄 수가 적용됩니다.

텍스트가 여러 길이의 문자열이고 Elide 속성 값을 ElideNone 이 아닌 다른 값으로 설정한 경우 가장 먼저 맞는 문자열이 사용되며, 그렇지 않으면 마지막 문자열이 생략됩니다.

다중 길이 문자열은 유니코드 문자열 터미네이터 문자 U009C 로 구분하여 가장 긴 문자열부터 가장 짧은 문자열 순으로 정렬됩니다.

텍스트 서식 지정

텍스트는 Format 필드에 설정한 값에 따라 일반 텍스트 또는 서식 있는 텍스트 형식 중 하나를 선택할 수 있습니다. AutoText 을 선택하고 텍스트의 첫 줄에 HTML 태그가 포함된 경우 텍스트는 서식 있는 텍스트로 처리됩니다. 서식 있는 텍스트는 지원되는 HTML 하위 집합에 설명된 HTML 4의 하위 집합을 지원합니다. 일반 텍스트가 서식 있는 텍스트보다 더 나은 성능을 제공합니다.

텍스트 렌더링

Render type 필드에서 텍스트 컴포넌트의 기본 렌더링 유형을 재정의할 수 있습니다. 대상 플랫폼에서 텍스트가 네이티브처럼 보이도록 하고 텍스트 변형과 같은 고급 기능이 필요하지 않은 경우 NativeRendering 을 선택합니다. 기본 렌더링과 함께 회전 또는 크기 조정을 사용하면 결과가 좋지 않고 때로는 픽셀화되는 경우가 있습니다.

NativeRendering 을 선택하면 Font Extras 섹션의 Hinting 필드에서 힌트 기본 설정을 지정할 수 있습니다:

• PreferDefaultHinting 대상 플랫폼의 기본 힌트 수준을 사용합니다.
• PreferNoHinting 가능하면 글리프의 윤곽선을 힌트하지 않고 텍스트를 렌더링합니다.
• PreferVerticalHinting 가로 힌트 없이 텍스트를 렌더링하지만 가능하면 글리프를 세로 방향의 픽셀 그리드에 정렬합니다.
• PreferFullHinting 가로 및 세로 방향 모두에 힌트가 있는 텍스트를 렌더링합니다.

고급 글꼴 속성

Font Extras 섹션에서 글꼴에 대한 추가 속성을 지정할 수 있습니다.

Capitalization 필드에서 대문자 변경이 적용되지 않는 일반 텍스트 렌더링을 위해 MixedCase 을 선택합니다. 텍스트를 모두 대문자 또는 소문자로 설정하거나 소문자를 사용할 수도 있습니다. Capitalize 옵션은 각 단어의 첫 번째 문자를 대문자로 렌더링합니다.

Style 필드에서 글꼴 스타일을 Outline, Raised 또는 Sunken 로 설정할 수 있습니다. Style color 필드에서 선택한 색상은 윤곽선이 있는 텍스트의 윤곽선 색상으로, 돋움 또는 움푹 들어간 텍스트의 그림자 색상으로 사용됩니다.

선택한 글꼴로 텍스트를 그릴 때 커닝을 사용하려면 Auto kerning 을 선택합니다.

글꼴은 문자를 올바르게 표시하기 위해 문자 집합에 복잡한 규칙을 적용하는 경우가 있습니다. 브라만 문자와 같은 일부 문자 체계에서는 텍스트를 읽기 위해 이 기능이 필요하지만 라틴 문자와 같은 다른 문자 체계에서는 단지 외형적인 기능일 뿐입니다. 이러한 기능은 성능 향상을 위해 기본적으로 비활성화되어 있습니다. 필요한 경우 Prefer shaping 을 선택합니다.

텍스트 입력

Text Edit 및 Text Input 구성 요소를 사용하여 사용자가 텍스트를 입력할 수 있는 텍스트 필드를 추가할 수 있습니다.

Text Input 컴포넌트는 편집 가능한 일반 텍스트를 한 줄로 표시하고 Text Edit 컴포넌트는 편집 가능한 서식 있는 텍스트 블록을 표시합니다. 두 컴포넌트 모두 텍스트 입력을 받는 데 사용됩니다.

비밀번호 입력

Text Input 컴포넌트의 속성을 설정하여 비밀번호 입력에 적합하게 만들 수 있습니다.

Input mask 필드에서 마스크와 메타 문자 및 그 사이에 구분 기호를 포함하는 입력 마스크를 만들 수 있습니다. 생성하거나 지우면 텍스트 편집 또는 입력이 메타 문자가 제거되고 마스크 문자가 공백 문자로 대체된 입력 마스크 문자열의 사본으로 채워집니다. 예를 들어 IP 주소 입력 필드에서 다음과 같은 마스크를 사용할 수 있습니다(밑줄을 빈 문자로 사용): 000.000.000.000;_. 입력 마스크 만들기에 대한 자세한 내용은 QLineEdit::inputMask 문서를 참조하세요.

Echo mode 필드에서 Password 을 선택하여 사용자가 입력하는 실제 문자 대신 플랫폼에 따라 달라지는 비밀번호 마스크 문자를 표시합니다. 사용자가 입력하는 대로 문자를 표시하려면 PasswordEchoOnEdit 을 선택합니다. 마스크 문자는 Password character 필드에 표시됩니다.

텍스트 입력

사용자가 텍스트 수정 또는 입력 필드에 텍스트를 입력하는 방법을 지정할 수 있습니다.

Maximum length 필드에서 사용자가 입력할 수 있는 최대 글자 수를 설정합니다.

Auto scroll 값에 따라 텍스트가 필드 너비보다 긴 경우 텍스트 편집 또는 입력이 스크롤될지 여부가 결정됩니다.

Overwrite mode 을 선택하면 기존 텍스트가 새 텍스트로 한 글자씩 덮어씌워집니다. 그렇지 않으면 커서 위치에 새 텍스트가 삽입되어 기존 텍스트를 대체합니다. 기본적으로 새 텍스트는 기존 텍스트를 덮어쓰지 않습니다.

사용자가 텍스트를 변경하지 못하도록 하려면 Read only 을 선택합니다.

텍스트 선택

Selection mode 필드에서 포인터 장치로 텍스트를 선택할 때 개별 문자를 선택할지 전체 단어를 선택할지 지정할 수 있습니다.

사용자가 마우스를 사용하여 일부 플랫폼별 방식으로 텍스트를 선택할 수 있도록 하려면 Select by mouse 을 선택합니다. 예를 들어 Flickable 컴포넌트 내에서 텍스트가 작동해야 하는 방식과 충돌할 수 있으므로 일부 플랫폼에서는 적절한 상호 작용이 아닐 수 있습니다.

Text Edit 컴포넌트의 경우 Select by keyboard 을 선택하면 편집 필드가 읽기 전용인 경우에도 사용자가 키보드를 사용하여 텍스트를 선택할 수 있습니다. 이 속성을 false 으로 설정하면 사용자가 편집 가능한 경우에도 키보드를 사용하여 텍스트를 선택할 수 없습니다.

초점

Focus on press 값에 따라 텍스트 편집 또는 입력이 마우스를 누를 때 활성 포커스를 받을지 여부가 결정됩니다.

기본적으로 텍스트 편집 또는 입력이 활성 포커스를 받으면 커서가 표시되므로 커서가 현재 표시되는지 여부에 따라 다른 속성을 바인딩할 수 있습니다. Cursor visible 속성의 값은 자동으로 설정 및 해제되므로 사용자가 직접 설정한 값을 덮어쓸 수 있습니다.

Persistent selection 을 선택한 경우 텍스트 편집 또는 입력은 활성 포커스가 다른 컴포넌트로 이동해도 선택 내용이 유지됩니다.

탭 및 여백

Text Edit 컴포넌트에서 텍스트 블록의 서식을 지정하기 위한 추가 속성을 지정할 수 있습니다.

Tab stop distance 필드에서 탭 정지 사이의 기본 거리를 디바이스 단위로 설정합니다.

Text margin 필드에서 텍스트 주위의 여백을 픽셀 단위로 설정합니다.

패딩

Padding 섹션의 속성 값은 콘텐츠 주위의 여백을 지정합니다. 개별 패딩 속성은 명시적으로 설정하지 않는 한 Global 필드의 값을 사용합니다.

플레이스홀더 텍스트

Text Field 및 Text Area 컨트롤의 경우 사용자가 필드에 텍스트를 입력하기 전에 필드에 표시할 텍스트를 지정할 수 있습니다. Placeholder text 필드에 텍스트를 지정하고 Placeholder color 필드에 색상을 지정합니다.

텍스트 필드에서 마우스오버 이벤트를 허용하려면 Hover 을 선택합니다.

텍스트 컴포넌트 요약

다음 표에는 UI에 텍스트를 추가하는 데 사용할 수 있는 컴포넌트가 나열되어 있습니다. 위치 열에는 Components 에서 컴포넌트를 찾을 수 있는 탭 이름이 포함됩니다. MCU 지원 열에는 MCU에서 지원되는 컴포넌트가 표시됩니다.