스타일 시트를 사용하여 Qt Widgets 사용자 지정하기

스타일 시트를 사용할 때, 모든 위젯은 여덟 개의 동심원형 사각형(여백 사각형, 테두리 사각형, 패딩 사각형, 콘텐츠 사각형)으로 구성된 상자로 간주됩니다. 상자 모델에서 이에 대해 더 자세히 설명하고 있습니다.

박스 모델

이 네 개의 동심원형 사각형은 개념적으로 다음과 같이 나타납니다:

• 여백은 테두리 바깥쪽에 위치합니다.
• 보더는 여백과 패딩 사이에 그려집니다.
• 패딩은 테두리 안쪽, 즉 테두리와 실제 콘텐츠 사이에 위치합니다.
• 콘텐츠는 여백, 테두리, 패딩을 제거한 후 원래 위젯이나 하위 컨트롤에서 남은 부분입니다.

마진, 테두리 너비( border-width), 패딩 속성은 모두 기본값이 0입니다. 이 경우, 네 개의 사각형(margin, border, padding, content)이 정확히 일치합니다.

background-image 속성을 사용하여 위젯의 배경을 지정할 수 있습니다. 기본적으로 background-image는 테두리 안쪽 영역에만 그려집니다. 이는 background-clip 속성을 사용하여 변경할 수 있습니다. background-repeat 및 background-origin을 사용하여 배경 이미지의 반복 방식과 시작 위치를 제어할 수 있습니다.

background-image는 위젯의 크기에 따라 크기가 조정되지 않습니다. 위젯 크기에 따라 크기가 조정되는 “스킨”이나 배경을 제공하려면 border-image를 사용해야 합니다. border-image 속성은 대체 배경을 제공하므로, border-image가 지정된 경우 background-image를 별도로 지정할 필요가 없습니다. 두 속성이 모두 지정된 경우, border-image가 background-image 위에 그려집니다.

또한, image 속성을 사용하여 border-image 위에 이미지를 그릴 수 있습니다. 지정된 이미지는 타일링되거나 늘어나지 않으며, 크기가 위젯의 크기와 일치하지 않을 경우 image-position 속성을 사용하여 정렬을 지정합니다. background-image 및 border-image와 달리, image 속성에 SVG를 지정할 수 있으며, 이 경우 이미지는 위젯 크기에 따라 자동으로 크기가 조정됩니다.

규칙을 렌더링하는 단계는 다음과 같습니다:

• 전체 렌더링 작업에 대한 클립 설정 (border-radius)
• 배경 그리기 (background-image)
• 테두리 그리기 (border-image, border)
• 오버레이 이미지 그리기 (image)

하위 컨트롤

위젯은 서로 겹쳐 그려지는 하위 컨트롤의 계층 구조(트리)로 간주됩니다. 예를 들어, 드롭다운 컨트롤( QComboBox )은 드롭다운 하위 컨트롤을 그린 다음 아래쪽 화살표 하위 컨트롤을 그립니다. 따라서 드롭다운 컨트롤( QComboBox )은 다음과 같이 렌더링됩니다:

• QComboBox { } 규칙 렌더링
• QComboBox::drop-down { } 규칙 렌더링
• QComboBox::down-arrow { } 규칙 렌더링

하위 컨트롤은 부모-자식 관계를 공유합니다. QComboBox 의 경우, 아래쪽 화살표의 부모는 드롭다운이며, 드롭다운의 부모는 위젯 자체입니다. 하위 컨트롤은 subcontrol-position 및 subcontrol-origin 속성을 사용하여 부모 내부에 배치됩니다.

위치가 지정된 후, 하위 컨트롤은 박스 모델을 사용하여 스타일을 적용할 수 있습니다.