Qt의 스타일 시트 시스템을 사용하면 멋지고 전문적인 UI를 쉽게 만들 수 있습니다. 이 예에서는 위젯에 사용자 정의 속성을 설정하고 이를 사용하여 다른 스타일 간에 전환하는 방법을 배웁니다.
위젯 속성과 하위 컨트롤을 사용자 정의하려면 다음 단계를 따르십시오.
- 새로운 Qt 프로젝트를 만들어 봅시다. 이를 위해 UI를 준비했습니다. 다음 스크린샷과 같이 UI에는 왼쪽에 세 개의 버튼이 있고 오른쪽에 세 페이지가 있는 탭 위젯이 있습니다.
- Vertical Layout 2개, PushButton 3개, Tab widget 사용
<< code >>
QPushButton
{
color: white;
background-color: #27a9e3;
border-width: 0px;
border-radius: 3px;
}
- 다음 스타일 시트를 기본 창(개별 버튼이 아님)에 추가했기 때문에 세 개의 버튼이 파란색입니다.
- 나는 당신이 익숙할 수도 있는 다음 스타일 시트를 메인 창에 추가하여 Qt에서 pseudo-states(의사 상태)가 무엇인지 설명할 것입니다.
<< code >>
QPushButton:hover {
color: white;
background-color: #66c011;
border-width: 0px;
border-radius: 3px;
}
- 이전 스타일 시트를 사용하여 로그인 화면 만들기 레시피에서 앞의 스타일 시트를 사용하여 마우스 오버 이벤트가 있을 때 버튼의 색상이 변경되도록 했습니다. 이것은 Qt 스타일 시트의 의사 상태에 의해 가능합니다. 이 경우 콜론으로 QPushButton 클래스와 분리된 단어 hover입니다. 모든 위젯에는 활성, 비활성화 및 활성화와 같은 일반 의사 상태 집합과 해당 위젯 유형에 적용할 수 있는 의사 상태 집합이 있습니다. 예를 들어 개방 및 평면과 같은 상태는 QPushButton에 대해 사용할 수 있지만 QLineEdit에는 사용할 수 없습니다. 사용자가 버튼을 클릭할 때 버튼의 색상을 노란색으로 변경하기 위해 눌린 의사 상태를 추가해 보겠습니다.
<< code >>
QPushButton:pressed {
color: white;
background-color: yellow;
border-width: 0px;
border-radius: 3px;
}
- 의사 상태를 사용하면 적용되는 조건에 따라 다른 스타일 시트 세트를 로드할 수 있습니다. Qt는 Qt 스타일 시트에서 동적 속성을 구현하여 이 개념을 더욱 발전시킵니다. 이를 통해 사용자 정의 조건이 충족되었을 때 위젯의 스타일 시트를 변경할 수 있습니다. 이 기능을 사용하여 Qt의 사용자 정의 속성을 사용하여 설정할 수 있는 사용자 정의 조건을 기반으로 버튼의 스타일 시트를 변경할 수 있습니다. 먼저 이 스타일 시트를 기본 창에 추가합니다.
<< code >>
QPushButton[pagematches=true] {
color: white;
background-color: red;
border-width: 0px;
border-radius: 3px;
}
- pagematches 속성이 true를 반환하면 푸시 버튼의 배경색이 빨간색으로 변경됩니다. 분명히 이 속성은 QPushButton 클래스에 존재하지 않습니다. 그러나 QObject::setProperty()를 사용하여 버튼에 추가할 수 있습니다.
<< code >>
QPushButton[pagematches=true] {
color: white;
background-color: red;
border-width: 0px;
border-radius: 3px;
}
- mainwindow.cpp 소스 코드에서 ui->setupUi(this) 바로 뒤에 다음 코드를 추가합니다.
- 앞의 코드는 pagematches라는 사용자 정의 속성을 첫 번째 버튼에 추가하고 해당 값을 true로 설정합니다. 이렇게 하면 기본적으로 첫 번째 버튼이 빨간색으로 바뀝니다.
- 그런 다음 탭 위젯을 마우스 오른쪽 버튼으로 클릭하고 Go to Slot...을 선택합니다. 그러면 창이 팝업됩니다. 목록에서 currentChanged(int) 옵션을 선택하고 확인을 클릭합니다. Qt는 다음과 같은 슬롯 기능을 생성합니다.
- 탭 위젯의 페이지를 변경할 때마다 슬롯 함수가 호출됩니다. 그런 다음 슬롯 기능에 코드를 추가하여 원하는 작업을 결정할 수 있습니다. 그렇게 하려면 mainwindow.cpp를 열면 거기에 함수 선언이 표시됩니다. 함수에 몇 가지 코드를 추가해 보겠습니다
<< code >>
void MainWindow::on_tabWidget_currentChanged(int index)
{// Set all buttons to false
ui->Page1->setProperty("pagematches", false);
ui->Page2->setProperty("pagematches", false);
ui->Page3->setProperty("pagematches", false);
// Set one of the buttons to true
if (index == 0)
ui->Page1->setProperty("pagematches", true);
else if (index == 1)
ui->Page2->setProperty("pagematches", true);
else
ui->Page3->setProperty("pagematches", true);
// Update buttons style
ui->Page1->style()->polish(ui->Page1);ui->Page2->style()->polish(ui->Page2);ui->Page3->style()->polish(ui->Page3);}
- 앞의 코드는 탭 위젯이 현재 페이지를 전환할 때 세 버튼 모두의 pagematches 속성을 false로 설정합니다. 어떤 버튼이 빨간색으로 바뀔지 결정하기 전에 모든 것을 재설정해야 합니다.
- 현재 페이지의 인덱스 번호를 알려주는 이벤트 신호에 의해 제공된 인덱스 변수를 확인하십시오. 인덱스 번호를 기반으로 버튼 중 하나의 pagematches 속성을 true로 설정합니다.
- Polish()를 호출하여 세 버튼 모두의 스타일을 새로 고칩니다. mainwindow.h에 다음 헤더를 추가할 수도 있습니다.
<< code >>
#include <QStyle>
- 프로젝트를 빌드하고 실행합니다. 이제 탭 위젯을 다른 페이지로 전환할 때마다 세 개의 버튼이 빨간색으로 변경되는 것을 볼 수 있습니다. 또한 버튼은 마우스 오버 시 녹색으로 변경되고 클릭 시 노란색으로 변경됩니다.
Qt는 사용자에게 모든 유형의 위젯에 자신의 사용자 정의 속성을 추가할 수 있는 자유를 제공합니다. 사용자 정의 속성은 Qt가 기본적으로 이러한 컨텍스트를 제공하지 않는 특수 조건이 충족될 때 특정 위젯을 변경하려는 경우 매우 유용합니다. 이를 통해 사용자는 Qt의 유용성을 확장하고 맞춤형 솔루션을 위한 유연한 도구를 만들 수 있습니다. 예를 들어 기본 창에 버튼 행이 있고 탭 위젯이 현재 표시하고 있는 페이지에 따라 색상을 변경해야 하는 경우 버튼이 색상을 변경해야 할 때를 알 방법이 없습니다. Qt 자체에는 이러한 유형의 상황에 대한 기본 제공 컨텍스트가 없기 때문입니다. 이 문제를 해결하기 위해 Qt는 QObject::setProperty()라는 일반 함수를 사용하는 위젯에 자체 속성을 추가하는 방법을 제공합니다. 사용자 정의 속성을 읽기 위해 QObject::property()라는 다른 함수를 사용할 수 있습니다.
다음으로 Qt 스타일 시트의 하위 컨트롤에 대해 이야기하겠습니다. 종종 위젯은 단일 개체가 아니라 더 복잡한 위젯을 형성하는 데 사용되는 둘 이상의 개체 또는 컨트롤의 조합입니다. 이러한 개체를 하위 컨트롤이라고 합니다.
예를 들어 스핀 상자 위젯에는 입력 필드, 아래쪽 버튼, 위쪽 버튼, 위쪽 화살표 및 아래쪽 화살표가 포함되어 있으며 이는 다른 위젯에 비해 상당히 복잡합니다. 이 경우 Qt는 원하는 경우 스타일 시트를 사용하여 모든 하위 컨트롤을 변경할 수 있도록 하여 더 많은 유연성을 제공합니다. 위젯의 클래스 이름 뒤에 있는 하위 컨트롤의 이름을 이중 콜론으로 구분하여 지정하면 됩니다. 예를 들어 다운 버튼의 이미지를 스핀 상자로 변경하려면 다음과 같이 스타일 시트를 작성할 수 있습니다.
<< code >>
QSpinBox::down-button {
image: url(:/images/spindown.png);
subcontrol-origin: padding;
subcontrol-position: right bottom;
}그러면 이미지가 내 스핀 상자의 아래쪽 버튼에만 적용되고 위젯의 다른 부분에는 적용되지 않습니다. 사용자 정의 속성, 의사 상태 및 하위 제어를 결합하여 Qt는 사용자 인터페이스를 사용자 정의할 수 있는 매우 유연한 방법을 제공합니다.
