이전 레시피(1.3 Qt Designer에서 스타일시트 사용하기)에서 Qt Designer를 사용하여 위젯에 스타일 시트를 적용하는 방법을 배웠습니다. 몇 가지 다른 유형의 위젯을 만들고 학습을 위해 위젯의 스타일 속성을 변경하여 작업을 더 진행해 보겠습니다.
그러나 이번에는 위젯에 하나씩 스타일을 적용하지 않고 main window에 스타일 시트를 적용하고 다른 모든 위젯에 계층 구조를 상속하도록 하는 것이 스타일 시트를 장기적으로 유지 관리에 용이 합니다.
다음 예제에서는 캔버스에서 다양한 유형의 위젯 형식을 지정하고 스타일 시트에 일부 코드를 추가하여 모양을 변경합니다.
- 이전 레시피(1.3 Qt Designer에서 스타일시트 사용하기)에서 Push Button에 적용한 스타일 시트를 제거합니다. Push Button의 스타일 시트를 선택하고 styleSheet 속성 옆에 있는 작은 화살표 버튼을 클릭하여 스타일 시트를 제거합니다. 이 버튼은 속성을 기본값으로 되돌립니다.
- 위젯 상자에서 Form편집기로 line edit, combo box, horizontal slider, radio button, check box 위젯들을 하나씩 드래그하여 UI에 추가합니다.
- 간단하게 하기 위해 Object Inspector에서 menuBar, statusBar를 UI 삭제합니다. menuBar 및 statusBar를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 제거를 선택합니다. 이제 UI가 다음과 유사해야 합니다.
- Form 편집기나 Object Inspector에서 MainWindow을 선택한 다음 마우스 오른쪽 버튼을 클릭하고 Change styleSheet를 선택하여 Edit Style Sheet 창을 엽니다. 스타일 시트에 다음을 삽입하십시오.
<< code >>
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
- 두꺼운 테두리와 함께 모든 것이 노란색으로 덮여 있는 UI를 볼 수 있습니다. 이는 앞의 스타일 시트에 선택기가 없기 때문입니다. 즉, 스타일이 계층 구조 아래까지 기본 창의 자식 위젯에 적용됩니다. 이를 변경하려면 다른 방법을 시도해 보겠습니다.
- 이번에는 PushButton만 앞의 코드에서 설명한 스타일을 가져오고 다른 모든 위젯은 기본 스타일로 되돌리겠습니다. UI에 푸시 버튼을 몇 개 더 추가하면 모두 동일하게 보일 것입니다.
<< code >>
QPushButton {
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
}
- 이것은 QPushButton 클래스를 사용하여 모든 위젯에 스타일을 적용하도록 선택기에 구체적으로 지시하기 때문에 발생합니다. 다음 코드와 같이 스타일 시트에서 이름을 언급하여 푸시 버튼 중 하나에만 스타일을 적용할 수도 있습니다.
<< code >>
QPushButton#pushButton_3 {
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
}
- 이 방법을 이해하면 스타일 시트에 다음 코드를 추가할 수 있습니다.
<< cdoe >>
QPushButton {
color: red;
border: 0px;
padding: 0 8px;
background: white;
}
QPushButton#pushButton_2 {
border: 1px solid red;
border-radius: 10px;
}
- 이 코드는 기본적으로 모든 푸시 버튼의 스타일과 pushButton_2 버튼의 일부 속성을 변경합니다. pushButton_3의 스타일 시트를 그대로 유지합니다. 이제 버튼은 다음과 같이 보일 것입니다.
<< code >>
QPushButton {
color: red;
border: 0px;
padding: 0 8px;
background: white;
}
QPushButton#pushButton_2 {
border: 1px solid red;
border-radius: 10px;
}
QPushButton#pushButton_3 {
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
}
- 첫 번째 스타일 시트 세트는 QPushButton 유형의 모든 위젯을 테두리와 빨간색 텍스트가 없는 흰색 직사각형 버튼으로 변경합니다. 두 번째 스타일 시트 세트는 pushButton_2라는 특정 QPushButton 위젯의 테두리만 변경합니다. pushButton_2의 배경색과 텍스트 색상은 각각 흰색과 빨간색으로 유지됩니다. 두 번째 스타일 시트 세트에서 재정의하지 않았기 때문에 적용할 수 있으므로 첫 번째 스타일 시트 세트에 설명된 스타일로 돌아갑니다. 모든 QPushButton 위젯에. 세 번째 스타일 시트 세트에서 Color 속성을 설정하지 않았기 때문에 세 번째 버튼의 텍스트도 빨간색으로 변경되었습니다.
- 다음 코드를 사용하여 범용 선택기를 사용하는 다른 스타일 시트 세트를 만듭니다.
<< code >>
*{
background: qradialgradient(cx: 0.3, cy: -0.4, fx: 0.3, fy: -0.4, radius: 1.35, stop: 0 #fff, stop: 1 #888);
color: rgb(255, 255, 255);
border: 1px solid #ffffff;
}
QPushButton {
color: red;
border: 0px;
padding: 0 8px;
background: white;
}
QPushButton#pushButton_2 {
border: 1px solid red;
border-radius: 10px;
}
QPushButton#pushButton_3 {
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
}
- 범용 선택기는 유형에 관계없이 모든 위젯에 영향을 미칩니다. 따라서 앞의 스타일 시트는 모든 위젯의 배경에 그라디언트 색상을 적용하고 해당 텍스트를 흰색인 1픽셀 실선 윤곽선으로 흰색으로 설정합니다. 색상 이름을 쓰는 대신 rgb 함수(rgb(255, 255, 255)) 또는 16진수 코드(#ffffff)를 사용하여 색상 값을 지정할 수 있습니다.
- 이전과 마찬가지로 앞의 스타일 시트는 푸시 버튼에 영향을 주지 않습니다. 왜냐하면 우리는 이미 고유한 스타일을 부여했으며, 이는 범용 선택기에 설명된 일반 스타일을 재정의할 것입니다. Qt에서는 위젯에 영향을 미치는 하나 이상의 스타일이 있을 때 더 구체적인 스타일이 궁극적으로 사용됩니다. 이제 UI가 다음과 같이 표시됩니다.
