확장 가능한 버튼 및 테두리 만들기

BorderImage 컴포넌트를 사용하면 PNG 파일과 같은 이미지를 테두리 및 배경으로 표시할 수 있습니다.

두 개의 테두리 이미지와 적절한 그래픽을 사용하여 버튼이 클릭되었을 때의 모양을 변경할 수 있습니다. 상태를 사용하여 마우스 버튼이 눌려 있는지 여부에 따라 표시할 이미지를 결정할 수 있습니다. 더 많은 이미지와 상태를 추가하여 마우스 오버와 같은 다른 마우스 이벤트에 따라 버튼의 모양을 변경할 수도 있습니다.

Text 컴포넌트를 사용하여 버튼 텍스트를 추가하세요. 상태를 사용하여 버튼 텍스트의 색상과 글꼴 크기도 변경할 수 있습니다. 예를 들어, 버튼 텍스트의 크기를 확대하거나 축소할 수 있습니다.

전체 영역을 덮고 마우스 이벤트에 반응하는 Mouse Area 컴포넌트를 추가하세요.

버튼 컴포넌트 만들기

버튼 컴포넌트를 생성하려면 ‘ File ’ > ‘ New File ’ > Qt Quick Files > Qt Quick UI File >

Choose 를 선택하여 (예를 들어) ‘ Button.ui.qml ’이라는 UI 파일을 생성합니다.

버튼 컴포넌트 구성

버튼 컴포넌트를 생성하려면:

1. ' 2D ' 뷰에서 ' Design '을 선택하여 UI 파일을 편집합니다.
2. Assets > 를 선택하여 사용하려는 이미지 파일을 프로젝트 폴더로 복사합니다.
3. Navigator 에서 루트 컴포넌트를 선택하고, ‘ Properties ’ 뷰에서 버튼의 너비(W)와 높이(H)를 사용할 이미지의 크기에 맞게 설정합니다. 이렇게 하면 버튼 컴포넌트의 초기 크기가 지정됩니다.
4. Components > Default Components > Basic 에서 ‘ Border Image ’ 컴포넌트 두 개를 Navigator 의 루트 컴포넌트로 드래그합니다.
5. Text 컴포넌트 하나를 루트 컴포넌트로 드래그합니다.
6. Navigator 에서 루트 컴포넌트를 선택한 다음, 컨텍스트 메뉴에서 Add Mouse Area 을 선택하여 마우스 영역을 추가합니다.
7. 테두리 이미지를 선택하여 해당 속성의 값을 편집합니다.
   1. Id 필드에 테두리 이미지의 ID를 입력합니다. 이 예제에서는 ID inactiveButton을 사용합니다.
   2. ' Source ' 필드에서 테두리 이미지에 사용할 이미지 파일을 선택합니다. 예를 들어, inactive_button.png 입니다.
   3. ' Layout ' 탭에서 ' (Fill to Parent)' 버튼을 선택하면 이미지가 항상 상위 요소와 동일한 크기가 됩니다. 이렇게 하면 이미지 크기가 컴포넌트 크기에 연동되므로 버튼 컴포넌트가 확장 가능해집니다.
8. 다른 테두리 이미지를 선택하여 유사한 방식으로 속성 값을 편집합니다:
   1. ' Id ' 필드에 'activeButton'을 입력합니다.
   2. ' Source ' 필드에서 버튼이 클릭되었을 때 표시할 이미지 파일을 선택합니다. 예: active_button.png.
   3. ' Layout ' 탭에서 ' ' (Fill to Parent) 버튼을 선택합니다.
9. ' Properties'에서 텍스트 컴포넌트를 선택하여 글꼴 크기와 색상을 지정합니다:
   1. ' Color ' 필드에서 색상 선택기를 사용하여 글꼴 색상을 선택하거나 필드에 값을 직접 입력합니다.
   2. ' Font ' 그룹의 ' Size ' 필드에 글꼴 크기를 입력합니다.
   3. ' Layout ' 탭에서 ' '(Vertical Center) 및 ' '(Horizontal Center) 버튼을 선택하여 상위 요소의 수직 및 수평 중앙 정렬을 상속받도록 설정합니다. 이렇게 하면 컴포넌트의 크기가 조정될 때 버튼 레이블이 중앙에 정렬됩니다.

상태를 사용하여 컴포넌트 속성 값 변경

1. States 뷰에서 ‘ ’를 두 번 선택하여 두 개의 새 상태를 생성합니다.

   

2. State1 를 선택합니다.
3. 상태 이름을 active로 변경합니다.
4. 를 선택한 다음, Set when Condition 를 선택하여 상태가 적용되어야 할 시점을 지정합니다.
5. Binding Editor 에서 mouseArea 컴포넌트와 pressed 신호를 선택하여 마우스 버튼을 눌렀을 때 상태가 적용되도록 지정합니다.

   

6. Navigator 에서 텍스트 컴포넌트를 선택하여 버튼이 눌렸을 때 텍스트 크기가 확대되도록 지정합니다.
7. Properties 에서 Advanced 섹션을 선택하고, Scale 속성의 값을 늘립니다.
8. Navigator 에서 inactiveButton을 선택하고, Properties 에서 해당 Visibility 속성의 값을 변경하여 활성 상태에서 숨기도록 설정합니다.
9. State2 를 선택합니다.
10. 상태 이름을 inactive로 변경합니다.
11. !mouseArea.pressed 에서 해당 상태의 when 조건을 설정하여 마우스 버튼이 눌려 있지 않을 때 상태가 적용되도록 지정합니다.

    

12. Ctrl+S를 선택하여 버튼을 저장합니다.
13. 상단 툴바에서 ‘ Live Preview ’ 버튼을 선택하여 버튼을 선택했을 때 어떻게 동작하는지 확인합니다. 미리 보기 창의 테두리를 드래그하여 컴포넌트의 크기를 조정했을 때 어떤 일이 발생하는지 확인합니다.

버튼 컴포넌트를 유용하게 사용하려면 프로젝트 내에서 생성해야 합니다. 프로젝트의 다른 파일을 작업하여 UI용 화면이나 다른 컴포넌트를 생성하면, 버튼 컴포넌트가 ‘ Components ’ > ‘ My Components ’에 나타납니다. 이 컴포넌트를 ‘ 2D ’ 또는 ‘ Navigator ’ 뷰로 드래그하여 버튼 인스턴스를 생성하고, 각 버튼 인스턴스의 속성 값을 수정하여 유용한 ID를 할당하거나, 외관을 변경하거나, 버튼 텍스트를 설정할 수 있습니다.

화면에 버튼을 배치하는 방법에 대한 자세한 내용은 ‘레이아웃의 확장성 확보’를 참조하십시오.