Qt 위젯 스타일시트 적용하기

저번 포스팅 중 Custom 윈도우에 대한 내용을 다룰 때 스타일시트를 간단하게 언급했는데요.

 

2023.02.28 - [Development] - Qt Custom 윈도우 만들기

Qt Custom 윈도우 만들기

 

이번에는 어떻게 사용하는지 상세히 다뤄보도록 하겠습니다.

 

아래 빌드 결과 화면은 Custom 윈도우에 버튼 2개를 추가하고 버튼에 스타일 시트를 적용한 겁니다.

 

적용방법은 스타일시트 String을 작성하여 setStyleSheet 함수를 사용하여 적용할 수 있습니다.

    QString strBtnStyleSheet = QString("QPushButton {"
            "font: %1pt \"%2\";"
            "color: rgba(25, 150, 245, 255);"
            "background-color:rgba(255, 255, 255, 255);"
            "border-width: 2px;"
            "border-color: rgba(25, 150, 245, 255);"
            "border-style: solid;"
            "border-radius: 3;"
            "}"

            "QPushButton:hover {"
            "color: rgba(255, 255, 255, 255);"
            "border-style: solid;"
            "border-width: 0px;"
            "border-color: red;"
            "background-color: rgba(100, 200, 255, 255); }"

            "QPushButton:pressed {"
            "color: rgba(255, 255, 255, 255);"
            "border-style: solid;"
            "border-width: 0px;"
            "border-color: #339;"
            "background-color: rgba(25, 150, 245, 255); }"

            "QPushButton:checked {"
            "color: rgba(255, 255, 255, 255);"
            "background-color: rgba(25, 150, 245, 255);"
            "border-width: 0px;"
            "border-color: red;"
            "border-style: solid;"
            "}"

            "QPushButton:disabled {"
              "color:rgba(170,170,170,255);"
              "border-style: solid;"
              "border-width: 2px;"
              "border-color: rgba(170,170,170,255);"
              "background-color:rgba(255,255,255,255);"
              "}"
            ).arg(20).arg(strFont);
            
    ui->pushButton->setStyleSheet(strBtnStyleSheet);
    ui->pushButton_2->setStyleSheet(strBtnStyleSheet);

 

QString에 구성된 QPushButton 스타일 시트를 간단하게 설명드리면,

QPushButton { ... }  ☞ 기본 버튼 스타일 QPushButton:hover { ... } ☞ 버튼 마우스 오버됬을 때 스타일 QPushButton:pressed { ... } ☞ 버튼 눌러 졌을 때 스타일 QPushButton:checked { ... } ☞ 버튼 누른 후 Release 됬을 때 스타일 QPushButton:disabled { ... } ☞ 버튼 비활성화 됬을 때 스타일

 

QPushButton 각 상황에 따른 구분에서,

color : 텍스트 컬러 설정 border-style : 테두리 스타일 설정 border-width : 테투리 두께 설정 border-color : 테투리 색상 설정 background-color : 배경색 생상 설정 border-radius : 코너 라운드 곡률 설정

 

방식이 javascrip css 와 거의 유사합니다^^

 

스타일시트를 잘 활용하면 웹에서 개발하듯이 각 위젯의 디자인을 손쉽게 설정할 수가 있습니다.

 

아래는 Qt 스타일 시트 공식 문서이며, 보다 자세하게 설명되어 있으니 참고하시기 바랍니다.

Qt Style Sheets Reference | Qt Widgets 5.15.12

Qt Style Sheets Reference | Qt Widgets 5.15.12

 

아래는 공식 문서에서 QProgressBar 관련 샘플인데, 이렇게도 되는구나 참고하시면 됩니다.