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

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

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

Text 컴포넌트를 사용하여 버튼 텍스트를 추가합니다. 상태를 사용하여 버튼 텍스트 색상과 글꼴 크기를 변경할 수도 있습니다. 예를 들어 버튼 텍스트의 크기를 늘리거나 줄일 수 있습니다.

전체 영역을 커버하고 마우스 이벤트에 반응하는 마우스 영역 컴포넌트를 추가합니다.

버튼 컴포넌트 만들기

버튼 컴포넌트를 만들려면 File > New File > Qt Quick Files > Qt Quick UI File >

Choose 를 선택하여 Button.ui.qml 라는 UI 파일을 만듭니다(예:).

버튼 컴포넌트 구성하기

버튼 컴포넌트를 구성하려면 다음과 같이 하세요:

1. Design 을 선택하여 2D 보기에서 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. 상태 이름을 활성으로 변경합니다.
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 으로 설정하여 마우스 버튼을 누르고 있지 않을 때 상태가 적용되도록 지정합니다.

    

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

버튼 컴포넌트를 유용하게 사용하려면 프로젝트에서 만들어야 합니다. 프로젝트의 다른 파일에서 작업하여 UI의 화면이나 기타 구성 요소를 만들면 버튼 구성 요소가 Components > My Components 에 나타납니다. 2D 또는 Navigator 보기로 드래그하여 버튼 인스턴스를 만들고 해당 속성 값을 수정하여 유용한 ID를 할당하고 모양을 변경하고 각 버튼 인스턴스에 대한 버튼 텍스트를 설정하는 등의 작업을 수행할 수 있습니다.

화면에서 버튼의 위치에 대한 자세한 내용은 레이아웃을 확장 가능하게 만들기를 참조하세요.