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

스타일 시트를 사용할 때 모든 위젯은 여백 직사각형, 테두리 직사각형, 패딩 직사각형, 내용 직사각형의 네 개의 동심원 직사각형이 있는 상자로 취급됩니다. 상자 모델에서 이에 대해 자세히 설명합니다.

상자 모델

네 개의 동심 사각형은 개념적으로 아래와 같이 나타납니다:

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

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

배경-이미지 속성을 사용하여 위젯의 배경을 지정할 수 있습니다. 기본적으로 배경 이미지는 테두리 안쪽 영역에 대해서만 그려집니다. 배경-클립 속성을 사용하여 변경할 수 있습니다. 배경 반복 및 배경 출처를 사용하여 배경 이미지의 반복 및 출처를 제어할 수 있습니다.

배경 이미지는 위젯의 크기에 따라 크기가 조정되지 않습니다. 위젯 크기에 따라 크기가 조정되는 '스킨' 또는 배경을 제공하려면 border-image를 사용해야 합니다. border-image 속성은 대체 배경을 제공하므로 border-image를 지정할 때 배경 이미지를 지정할 필요는 없습니다. 둘 다 지정한 경우 border-image가 background-image 위에 그려집니다.

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

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

• 전체 렌더링 작업을 위한 클립 설정(테두리-반경)
• 배경 그리기(배경 이미지)
• 테두리 그리기(테두리 이미지, 테두리)
• 오버레이 이미지(이미지) 그리기

하위 컨트롤

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

• QComboBox { } 규칙 렌더링
• QComboBox::드롭다운 { } 규칙 렌더링하기
• QComboBox::아래쪽 화살표 { } 규칙 렌더링

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

위치가 지정되면 상자 모델을 사용하여 하위 컨트롤의 스타일을 지정할 수 있습니다.