Qt는 나중에 사용할 수 있도록 프로그램 실행 파일에 모든 유형의 파일을 저장할 수 있는 플랫폼 독립적 리소스 시스템을 제공합니다. 이미지, 오디오, 비디오, HTML, XML, 텍스트 파일, 바이너리 파일 등 실행 파일에 저장할 수 있는 파일 유형에는 제한이 없습니다.
리소스 시스템은 애플리케이션에서 언제든지 액세스할 수 있도록 리소스 파일(예: 아이콘 및 번역 파일)을 실행 파일에 포함하는 데 유용합니다. 이를 달성하려면 .qrc 파일에서 리소스 시스템에 추가하려는 파일을 Qt에 알려야 하고 Qt는 빌드 프로세스 중에 나머지를 처리합니다.
프로젝트에 새 .qrc 파일을 추가하려면 File | New File or Project... 에서 File and Clsses의 Qt를 선택하고 Qt Resource File을 선택합니다. 그런 다음 이름(즉, 리소스)을 지정하고 다음 버튼을 클릭한 후 마침 버튼을 클릭합니다. 이제 .qrc 파일이 생성되고 Qt Creator에 의해 자동으로 열립니다. Qt Creator가 자원을 관리하기 위한 사용자 인터페이스를 제공하므로 XML 형식으로 .qrc 파일을 직접 편집할 필요가 없습니다.
프로젝트에 이미지와 아이콘을 추가하려면 이미지와 아이콘이 프로젝트 디렉토리에 있는지 확인해야 합니다. .qrc 파일에 마우스 오른쪽 버튼을 클릭하여 Add Prefix 선택하여 리소스를 관리할 수 있다. Prefix는 프로젝트에 많은 리소스가 있을 때 더 잘 관리할 수 있도록 리소스를 분류하는 데 사용됩니다.
- 방금 만든 Prefix의 이름을 /icons로 바꿉니다.
- Add를 클릭한 다음 Prefix 추가를 클릭하여 다른 Prefix를 생성합니다.
- 새 Prefix의 이름을 /images로 바꿉니다.
- /icons Prefix를 선택하고 Add를 클릭한 다음 파일 추가를 클릭합니다.
- 파일 선택 창이 나타납니다. 이것을 사용하여 모든 아이콘 파일을 선택하십시오. 키보드의 Ctrl 키를 누른 상태에서 파일을 클릭하여 선택하면 한 번에 여러 파일을 선택할 수 있습니다. 완료되면 열기를 클릭합니다.
- /images 접두사를 선택하고 추가 버튼을 클릭한 다음 파일 추가 버튼을 클릭합니다. 파일 선택 창이 다시 뜨는데 이번에는 배경 이미지를 선택하겠습니다.
- 이전 단계를 반복하되 이번에는 /images 접두사에 로고 이미지를 추가합니다. Ctrl + S를 눌러 완료하면 저장하는 것을 잊지 마십시오. .qrc 파일은 이제 다음과 같아야 합니다.
- mainwindow.ui 파일로 돌아가십시오. 방금 프로젝트에 추가한 리소스를 활용해 보겠습니다. 상단 패널에 있는 다시 시작 버튼을 선택합니다. 아이콘 속성이 표시될 때까지 속성 편집기를 아래로 스크롤합니다. 드롭다운 화살표 아이콘이 있는 작은 버튼을 클릭하고 메뉴에서 리소스 선택을 클릭합니다.
- 리소스 선택 창이 나타납니다. 왼쪽 패널에서 아이콘 접두사를 클릭하고 오른쪽 패널에서 다시 시작 아이콘을 선택합니다. 확인을 누릅니다.
- 버튼에 작은 아이콘이 나타납니다. 기본 아이콘 크기가 16 x 16으로 설정되어 있기 때문에 아이콘이 매우 작게 보입니다. iconSize 속성을 50 x 50으로 변경하면 아이콘이 더 크게 표시되는 것을 볼 수 있습니다. 종료 버튼에 대해 이전 단계를 반복하되 이번에는 종료 아이콘을 대신 선택합니다.
- 이제 두 개의 버튼이 다음과 같아야 합니다.
- 리소스 파일에 추가한 이미지를 로고로 사용합시다. 로고 위젯을 선택하고 앞서 추가한 스타일 시트를 제거하여 윤곽선을 렌더링합니다.
- pixmap속성이 보일 때까지 속성 편집기를 아래로 스크롤합니다.
- pixmap 속성 뒤에 있는 작은 드롭다운 버튼을 클릭하고 메뉴에서 리소스 선택을 선택합니다. 로고 이미지를 선택하고 확인을 클릭합니다. 로고 크기가 더 이상 이전에 설정한 치수를 따르지 않습니다. 대신 이미지의 실제 치수를 따릅니다. 이것이 단순히 픽스맵 속성이 작동하는 방식이기 때문에 치수를 변경할 수 없습니다.
- 로고의 크기를 더 많이 제어하려면 픽스맵 속성에서 이미지를 제거하고 대신 스타일 시트를 사용할 수 있습니다. 다음 코드를 사용하여 아이콘 컨테이너에 이미지를 적용할 수 있습니다.
- 이미지의 경로를 얻으려면 파일 목록 창에서 이미지 이름을 마우스 오른쪽 버튼으로 클릭하고 경로 복사를 선택합니다. 경로는 운영 체제의 클립보드에 저장되며 이제 이전 스타일 시트에 붙여넣을 수 있습니다. 이 방법을 사용하면 이미지가 스타일을 적용한 위젯의 크기에 맞는지 확인할 수 있습니다. 이제 로고가 다음 스크린샷과 같이 표시됩니다.
- 스타일 시트를 사용하여 바탕 화면 이미지를 배경에 적용합니다. 배경 크기는 창 크기에 따라 달라지므로 여기에서는 픽스맵을 사용할 수 없습니다. 대신 스타일 시트에서 border-image 속성을 사용합니다. 기본 창을 마우스 오른쪽 버튼으로 클릭하고 스타일 시트 변경...을 선택하여 스타일 시트 편집 창을 엽니다. CentralWidget의 스타일 시트 아래에 새 줄을 추가합니다.
<< code >>
#centralwidget {
background-color: rgba(32, 80, 96, 100);
border-image: url(:/imses/resources/login_bg.png);
}
- 정말 간단하고 쉽습니다! 이제 로그인 화면이 다음과 같아야 합니다.
댓글 없음:
댓글 쓰기