이또한 흘러가리라

Slider를 꾸밀 수 있는 여러 방법에 대해서 공부를 해보자

horizontal orientation을 기준으로 진행을 할거다

먼저 기본적인 slider의 모습은 다음과 같다

사실 Mac OS 환경에서는 기본 슬라이더가 제일 이쁘다. 하지만 리눅스 환경에서는...

다음으로는 PyQT 홈페이지에서 제공하는 예제를 보자.

https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qslider

위의 예제코드에서 vertical만 horizontal로 바꾼 것이다.

간단하게, handle은 초록색, 진행된 곳은 분홍색, 진행되지 않은 곳은 흰색으로 되는 코드이다.

QSlider::groove:vertical {
    background: red;
    position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
    left: 4px; right: 4px;
}

QSlider::handle:vertical {
    height: 10px;
    background: green;
    margin: 0 -4px; /* expand outside the groove */
}

QSlider::add-page:vertical {
    background: white;
}

QSlider::sub-page:vertical {
    background: pink;
}

하지만 내가 만들고 싶은 것은 handle의 위치와 상관없이 slider의 배경 생각을 자유롭게 바뀌는 slider이다. 이를 위해서는 stylesheet을 사용하는 것이 아닌 다음과 같이 custom slider class를 만들어야한다.

class CustomSlider(QSlider):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        
    def paintEvent(self, event):
        painter = QPainter(self)
        groove_rect = QRect(self.rect().x(), self.rect().y(), self.rect().width(), self.rect().height())
        add_page_width = int(self.value() / (self.maximum() - self.minimum()) * self.rect().width())
        add_page_rect = QRect(self.rect().x(), self.rect().y(), add_page_width, self.rect().height())
        sub_page_rect = QRect(add_page_width, self.rect().y(), self.rect().width() - add_page_width, self.rect().height())
        
        # 그루브
        groove_color = QColor("#dddddd")
        painter.fillRect(groove_rect, groove_color)
        
        # add-page
        add_page_color = QColor("#b5b5b5")
        painter.fillRect(add_page_rect, add_page_color)
        
        # sub-page
        sub_page_color = QColor("#dddddd")
        painter.fillRect(sub_page_rect, sub_page_color)
        
        # handle
        handle_center = QPoint(self.sliderPosition() * self.width() / self.maximum(), self.height() / 2)
        handle_radius = 10
        handle_color = QColor("#eeeeee")
        painter.setBrush(handle_color)
        painter.drawEllipse(handle_center, handle_radius, handle_radius)

위 코드를 빌드하면 다음과 같은 slider가 나온다. 아직은 이전 코드와 같은 기능만 가능하다.

어느 정도 사용하는 파일 경로가 정해져 있지만 그때그때 사용하고 싶은 폴더를 여러개 선택할 수 있는 기능을 만들고 싶어졌다.

따라서 QTreeView와 QFileSystemModel을 사용해서 이러한 기능을 만들어보려고 한다.

참고로 PyQt5를 기준으로 구현을 진행하였다.

from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

먼저 간단하게 QFileSystemModel을 상속받는 CustomFileSystemModel을 정의해주었다.

class CustomFileSystemModel(QFileSystemModel):
    def __init__(self):
        super().__init__()

그리고 이러한 CustomFileSystemModel를 QTreeView로 불러와 준다.

        self.model = CustomFileSystemModel()
        self.model.setRootPath(QDir.currentPath())

        self.tree =  QTreeView()
        self.tree.setSelectionMode(QAbstractItemView.MultiSelection)
        self.tree.setModel(self.model)

        vbox = QVBoxLayout()
        vbox.addWidget(btn1)
        vbox.addWidget(self.tree)

한번에 여러 아이템을 선택할 수 있도록 MultiSelection 모드로 설정해준다. 또한 간단하게 현재 선택한 아이템 정보를 다이나믹하게 읽을 수 있도록 간단한 버튼을 만들어주었다. 그럼 다음과 같은 화면으로 프로그램이 실행된다.

개인적으로 폴더나 파일의 이름만 불러왔으면 좋겠다. Size, Kind, ... 이런 것들이 뜨지 않게 해보자.

다음과 같이 필요없는 column을 숨겼다. 

        self.tree.hideColumn(1)
        self.tree.hideColumn(2)
        self.tree.hideColumn(3)

아래와 같이 깔끔하게 원하는 이름만 나오는 것을 확인할 수 있다.

이제 선택된 아이템들의 경로를 확인해보자. 버튼을 이용해서 선택된 아이템들의 경로를 print하는 기능을 추가하였다.

    def print(self):
        for idx in self.tree.selectedIndexes():
            print(self.model.filePath(idx))

아래와 같이 여러 개의 아이템을 선택한 후 button1을 누르면 해당 파일의 절대 경로가 나오게 된다.

아래와 같은 절대 경로가 출력된다.

/Library/Apple
/Library/Image Capture