PySide6에서 QTreeView 스타일시트 선택자 정리 및 활용법

PySide6에서 QTreeView 스타일시트 선택자 정리 및 활용법

📝 소개

PySide6을 사용하여 GUI 애플리케이션을 개발할 때, QTreeView는 계층적 데이터를 표시하는 중요한 위젯입니다. 하지만 기본 스타일은 단순하기 때문에 사용자 경험(UX)을 향상시키려면 스타일을 커스터마이징하는 것이 필수적입니다.

이번 포스팅에서는 PySide6에서 QTreeView의 스타일을 변경할 수 있는 선택자(selector)를 정리하고, 실전에서 활용할 수 있도록 예제 코드도 함께 소개하겠습니다.

---

🎯 목표

• QTreeView 스타일시트에서 사용할 수 있는 모든 선택자를 정리한다.
• QTreeView의 항목(Item), 체크박스(Indicator), 브랜치(Branch), 헤더(Header) 등 각각을 스타일링하는 방법을 익힌다.
• QTreeView의 기본 디자인을 커스터마이징할 수 있도록 실전 예제 코드를 제공한다.

---

📌 QTreeView 스타일시트 선택자 정리

PySide6의 QTreeView에서 사용할 수 있는 주요 스타일시트 선택자는 다음과 같습니다.

선택자	설명
QTreeView	트리뷰 전체의 스타일을 설정
QTreeView::item	개별 항목(셀)의 스타일을 설정
QTreeView::item:selected	선택된 항목의 스타일을 설정
QTreeView::branch	부모-자식 간의 트리 연결선을 설정
QTreeView::branch:has-children	자식이 있는 부모 항목의 스타일을 설정
QTreeView::branch:!has-children	자식이 없는 항목(리프 노드)의 스타일을 설정
QTreeView::indicator	체크박스 스타일을 설정
QTreeView::indicator:checked	체크된 상태의 체크박스 스타일을 설정
QTreeView::indicator:unchecked	체크되지 않은 상태의 체크박스 스타일을 설정
QTreeView::indicator:indeterminate	체크 상태가 불확실한 경우(부분 체크) 스타일을 설정
QTreeView::branch:closed	닫힌 상태의 브랜치 아이콘을 설정
QTreeView::branch:open	열린 상태의 브랜치 아이콘을 설정
QHeaderView	테이블의 헤더 전체 스타일을 설정
QHeaderView::section	헤더의 개별 열 스타일을 설정
QTreeView::item:has-children	부모 아이템(자식이 있는 항목)의 스타일을 설정
QTreeView::item:!has-children	리프 노드(자식이 없는 항목)의 스타일을 설정

반응형

---

📌 QTreeView 스타일링 예제 코드

아래 예제는 QTreeView의 주요 선택자를 활용하여 스타일을 커스터마이징하는 코드입니다.

from PySide6.QtWidgets import QApplication, QMainWindow, QTreeView, QStandardItemModel, QStandardItem


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QTreeView Styling Example")
        self.resize(600, 400)

        # QTreeView 생성
        self.tree_view = QTreeView(self)
        self.setCentralWidget(self.tree_view)

        # QStandardItemModel 생성
        self.model = QStandardItemModel()
        self.model.setHorizontalHeaderLabels(["Items"])

        # 부모 및 자식 아이템 추가
        for i in range(3):
            parent_item = QStandardItem(f"Parent Item {i}")
            parent_item.setCheckable(True)  # 체크박스 추가

            for j in range(2):
                child_item = QStandardItem(f"Child Item {i}.{j}")
                child_item.setCheckable(True)
                parent_item.appendRow(child_item)

            self.model.appendRow(parent_item)

        self.tree_view.setModel(self.model)

        # 스타일시트 설정
        self.tree_view.setStyleSheet("""
            /* 전체 QTreeView 스타일 */
            QTreeView {
                background-color: #F5F5F5;
                border: 1px solid #D3D3D3;
                show-decoration-selected: 1; /* 선택된 항목 강조 */
            }

            /* 개별 항목 스타일 */
            QTreeView::item {
                padding: 5px;
                color: #000000;
            }

            /* 선택된 항목 스타일 */
            QTreeView::item:selected {
                background-color: #0078D7;
                color: #FFFFFF;
            }

            /* 부모 아이템 스타일 */
            QTreeView::branch:has-children {
                border-bottom: 2px solid #FF5733;
            }

            /* 리프 노드 스타일 */
            QTreeView::branch:!has-children {
                border-left: 2px solid #33FF57;
            }

            /* 체크박스 스타일 */
            QTreeView::indicator {
                width: 16px;
                height: 16px;
            }

            QTreeView::indicator:checked {
                background-color: #33FF57;
                border: 1px solid #FFFFFF;
            }

            QTreeView::indicator:unchecked {
                background-color: #FF5733;
                border: 1px solid #FFFFFF;
            }

            /* 헤더 스타일 */
            QHeaderView::section {
                background-color: #D3D3D3;
                border: 1px solid #AAAAAA;
                padding: 5px;
            }
        """)


if __name__ == "__main__":
    import sys

    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec())

---

📌 실행 결과

✅ 트리 뷰의 배경색이 변경됩니다.
✅ 부모 항목과 자식 항목을 구분하는 스타일이 적용됩니다.
✅ 선택된 항목이 강조 표시됩니다.
✅ 체크박스의 스타일이 변경됩니다.
✅ 헤더의 스타일이 적용됩니다.

---

📌 추가적인 스타일 커스터마이징

1. 트리뷰의 가로 또는 세로 스크롤바 스타일링

QTreeView::vertical-scrollbar {
    width: 10px;
}
QTreeView::horizontal-scrollbar {
    height: 10px;
}

 

   2. 트리 뷰의 브랜치 아이콘 변경

QTreeView::branch:closed:has-children {
    image: url("closed_icon.png");
}
QTreeView::branch:open:has-children {
    image: url("open_icon.png");
}

---

📌 주의할 점

1. 스타일이 일부 적용되지 않을 경우:
   • 스타일 적용 후 self.tree_view.update()를 호출하여 UI를 갱신하세요.
   • 체크박스나 아이콘이 기본 스타일과 충돌할 수도 있습니다.
2. 너무 많은 스타일 적용 시 성능 저하 가능:
   • 스타일시트가 복잡해지면 렌더링 속도가 느려질 수 있습니다.
   • QSS 파일을 외부 파일로 저장하고 setStyleSheet(open("style.qss").read())로 적용하는 것도 좋은 방법입니다.