C++ Qt Ui Style Sheet 활용

---

Stylesheet를 적용하기 위한 두 가지 방법이 있습니다.

 

1.Ui 디자인에서 CSS를 적용하려는 위젯을 우클릭 ,

Change StyleSheet... 클릭하고 편집기에서 CSS 코드를 작성합니다.

 

2.setStyleSheet 함수를 사용합니다. http://doc.qt.io/qt-5/stylesheet-examples.html

App->setStyleSheet("QLineEdit { background-color: yellow }");

 

---

 

 

● CSS 기본문법활용 http://doc.qt.io/qt-5/stylesheet-reference.html

 

다음은 label 샘플코드입니다.

 

sample1

 

sample1 css code

border-radius: 15px; 
padding: 2px;
background-color: rgba(0, 222, 255, 110);
font: bold italic 20px;
color:white;

 

 

위 샘플처럼 하나의 label이면 상관없지만

여러개의 label에 똑같은 효과를 줘야 하는 경우

해결방법입니다.

 

라벨 그룹을 구성합니다.

 

Layout에는 StyleSheet를 적용할 수 없으므로 

라벨 그룹이 속한 레이아웃을 우클릭 하고 

QWidget으로 변환합니다.

 

변환한 QWidget을 우클릭하고 Stylesheet 편집기를 들어가서

다음과 같이 CSS코드를 작성합니다.

QLabel{ 
border-radius: 10px;
padding: 2px;
background-color: rgba(0, 222, 255, 110);
font: bold italic 20px;
color:white;
}

 

QWidget의 하위인 QLabel들은 전부 적용됩니다.

 

 

 

● 이미지 삽입

 

Qt는 qrc파일을 만들어 이미지들을 손쉽게 관리할 수 있습니다.

 

만드는 방법은 프로젝트 우클릭 -> add new 하면

다음과 같은 창이 뜰겁니다.

Qt -> QtResuorce File을 선택하고 Choose를 누릅니다.

 

그리고 만든 qrc의 편집기를 엽니다.(Open in Editor)

 

Prefix에 이미지를 보관할 경로를 적어줍니다.

참고로 기본경로는 현재 프로젝트 파일이 있는 경로입니다.

 

그 후 Add Prefix를 누르고 만든 Prefix에

이미지들을 넣어주면 됩니다.

 

혹여나 Add한 이미지 파일이 프로젝트 경로에 없을 경우

다음과 같은 메시지를 출력합니다.

Copy를 누르면 다이얼로그박스가 뜨는데

해당 프로젝트 폴더를 선택하면 그곳에 이미지파일이 복사됩니다.

리소스를 삽입했다면 Ctrl+s 키를 눌러 저장해야 적용됩니다.

 

 

이제 qrc에 있는 이미지를 라벨에 적용시켜봅시다.

QLabel의 경우 ProPerty에서 Choose Resuorce 버튼을 클릭하여 가져올 수 있습니다.

 

또는 Stylesheet 편집기에서 Add Resource를 통해서

이미지 파일의 url을 가져오고 border-image를 통해 이미지를 삽입합니다.

QLabel{ 
border-image: url(:/new/ui_img/document.png);
}

 

그리고 해당 이미지 크기에 맞게 사이즈를 조절해야합니다.

minimumSize 값을 적용시키려면 sizePolicy를 Fixed로 바꿔주세요.

 

 

완성된 샘플사진입니다.

 

sample2

 

 

 

sample2 css code

QLabel{ 
border-image: url(:/new/ui_img/document.png);
}
QLabel:hover{
background-color:rgba(0,0,0,120);
}

4 - Label 위에 마우스를 올려놓으면 적용됩니다.