1.5.5 스타일 시트를 사용하여 로그인 화면 만들기

 아직 끝나지 않았습니다! 이전 레시피(1.5.4 스타일 시트를 사용하여 로그인 화면 만들기)를 보면 로그인 양식과 로고는 그 아래의 수직 스페이서로 인해 기본 창 상단에 붙어 있습니다. 로고와 로그인 양식은 메인 창 상단이 아닌 중앙에 위치해야 합니다. 이 문제를 해결하려면 다음 단계를 따르세요.

1. 상단 패널과 로고 레이아웃 사이에 또 ​​다른 수직 스페이서를 추가하면 정렬의 균형을 맞추는 하단의 스페이서에 대응합니다.
2. 로고가 로그인 양식에 너무 가깝게 붙어 있다고 생각되면 로고의 레이아웃과 로그인 양식의 레이아웃 사이에 수직 스페이서를 추가할 수 있습니다. sizeType 속성을 Fixed로 설정하고 Height 속성을 10으로 설정합니다.
   
   
   
3. 상단 패널의 레이아웃을 마우스 오른쪽 버튼으로 클릭하고 Morph into | QWidget 이름을 topPanel로 바꿉니다. 레이아웃에는 여백 이외의 속성이 없기 때문에 레이아웃에 스타일 시트를 적용할 수 없기 때문에 레이아웃을 QWidget으로 변환해야 합니다.
   
   
   
4. main window 의 가장자리 주위에 약간의 여백이 있습니다. 여백을 제거하려면 MainWindow 패널 바로 아래에 있는 Object Inspector 창에서 centralWidget 개체를 선택하고 모든 여백 값을 0으로 설정합니다.
   
   
   
5. 실행 버튼(녹색 화살표 아이콘 포함)을 클릭하여 프로젝트를 실행하여 프로그램이 어떻게 생겼는지 확인합니다. 모든 것이 잘 되었다면 다음과 같이 표시되어야 합니다.
   
   
   
6. 스타일시트로 UI를 꾸며보자! 모든 중요한 위젯에 개체 이름이 지정되었기 때문에 기본 창에서 스타일 시트를 적용하는 것이 더 쉽습니다. 스타일 시트를 기본 창에만 작성하고 계층 구조 트리를 상속하도록 하기 때문입니다.
7. Object Inspector 창에서 MainWindow를 마우스 오른쪽 버튼으로 클릭하고 Change styleSheet...를 선택합니다.
8. 스타일 시트에 다음 코드를 추가합니다.
   

   << code >>

   #centralWidget {

   background: rgba(32, 80, 96, 100);

   }

   
   

9. 기본 창의 배경색이 변경됩니다. 다음 스타일 시트에서 리소스 사용 섹션에서 배경 이미지를 사용하는 방법을 배웁니다. 따라서 색상은 일시적입니다.
10. Qt에서 메인 윈도우 자체에 스타일을 적용하려면 윈도우가 컨테이너일 뿐이기 때문에 메인 윈도우 대신에 해당하는 centralWidget에 스타일을 적용해야 합니다.
11. 상단 패널에 멋진 그라디언트 색상을 추가합니다.
    

    << code >>

    #topPanel {

    background-color: qlineargradient(spread:reflect, x1:0.5, y1:0, x2:0, y2:0, stop:0 rgba(91, 204, 233, 100), stop:1 rgba(32, 80, 96, 100));

    }

    

    
    

12. 로그인 폼에 검은색을 적용하여 반투명하게 보이게 합니다. 또한 border-radius 속성을 설정하여 로그인 양식 컨테이너의 모서리를 약간 둥글게 만들 것입니다.
    

    << code>>

    #loginForm {

    background: rgba(0, 0, 0, 80);

    border-radius: 8px;

    }

    

    
    

13. 일반 유형의 위젯에 스타일 적용:
    

    << code >>

    QLabel { color: white; }

    QLineEdit { border-radius: 3px; }

    

    
    

14. 앞의 스타일 시트는 모든 레이블의 텍스트를 흰색으로 변경합니다. 여기에는 위젯의 텍스트도 포함됩니다. 내부적으로 Qt는 텍스트가 있는 위젯에 동일한 유형의 레이블을 사용하기 때문입니다. 또한 라인 편집 위젯의 모서리를 약간 둥글게 만들었습니다.
15. UI의 모든 푸시 버튼에 스타일 시트를 적용합니다.
    

    << code >>

    QPushButton {

    color: white;

    background-color: #27a9e3;

    border-width: 0px;

    border-radius: 3px;

    }

    

    
    

16. 앞의 스타일 시트는 모든 버튼의 텍스트를 흰색으로 변경한 다음 배경색을 파란색으로 설정하고 모서리도 약간 둥글게 만듭니다.
17. 더 나아가기 위해 hover 키워드를 사용하여 마우스를 올려놓았을 때 푸시 버튼의 색상이 변경되도록 만들 것입니다.
    

    << code >>

    QPushButton:hover { background-color: #66c011; }

    
    

18. 앞의 스타일 시트는 푸시 버튼 위에 마우스를 올려 놓으면 푸시 버튼의 배경색을 녹색으로 변경합니다. 이에 대해서는 다음 속성 및 하위 컨트롤 사용자 지정 섹션에서 자세히 설명합니다.
19. 위젯의 크기와 여백을 추가로 조정하여 더 보기 좋게 만들 수 있습니다. 앞서 6단계에서 직접 적용한 스타일 시트를 제거하여 로그인 양식의 경계선을 제거하는 것을 잊지 마십시오.
20. 로그인 화면은 다음과 같아야 합니다.