[PyQT(파이큐티)] progress bar 색상 변경 및 디자인 변경

[PyQT(파이큐티)] progress bar timer (프로그레스 바 타이머) 설정

[PyQT(파이큐티)] progress bar timer (프로그레스 바 타이머) 설정

 

일단 progressbar 관련 코드 전체를 보여드리도록 하겠습니다. 

아래서 하나씩 설명하기로하고, 간단하게 먼저 설명을 하자면 아래 코드는 qt designer가 아닌, python 코드를 통해서만 시작페이지 ui를 제작했습니다. 시작 page_ui 전체를 class를 통해 제작하였으며,

qt designer에서 styleSheet 변경을 통해 할용하려면 큰 따옴표 부분만 활용하면 됩니다. 

 

 

       self.progressBar = QtWidgets.QProgressBar(self.main_frame)
        self.progressBar.setGeometry(QtCore.QRect(350, 720, 500, 30))
        self.progressBar.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.progressBar.setStyleSheet("QProgressBar{\n"
"    background-color: rgb(98, 114, 164);\n"
"    color:rgb(200,200,200);\n"
"    border-style: none;\n"
"    border-bottom-right-radius: 10px;\n"
"    border-bottom-left-radius: 10px;\n"
"    border-top-right-radius: 10px;\n"
"    border-top-left-radius: 10px;\n"
"    text-align: center;\n"
"}\n"
"QProgressBar::chunk{\n"
"    border-bottom-right-radius: 10px;\n"
"    border-bottom-left-radius: 10px;\n"
"    border-top-right-radius: 10px;\n"
"    border-top-left-radius: 10px;\n"
"    background-color: qlineargradient(spread:pad, x1:0, y1:0.511364, x2:1, y2:0.523, stop:0 rgba(254, 121, 199, 255), stop:1 rgba(170, 85, 255, 255));\n"
"}\n"
"\n"
"")
        self.progressBar.setProperty("value", 0)
        self.progressBar.setAlignment(QtCore.Qt.AlignCenter)
        self.progressBar.setTextVisible(True)
        self.progressBar.setInvertedAppearance(False)
        self.progressBar.setTextDirection(QtWidgets.QProgressBar.TopToBottom)
        self.progressBar.setObjectName("progressBar")

 

---

1.  progress bar를 main_frame에 만들겠다. QRect(x,y,w,h)는 x,y의 위치부터 시작해서 가로500, 세로30인 네모막대로 만들겠다는 의미입니다. (qt designer에서는 그냥 progressbar를 선택해서 원하는 위치에 넣으시면 됩니다.)

        self.progressBar = QtWidgets.QProgressBar(self.main_frame)
        self.progressBar.setGeometry(QtCore.QRect(350, 720, 500, 30))

 

2. progressbar가 왼쪽에서 오른쪽으로 가도록 만들겠다. (보통의 progressbar와 같이)

        self.progressBar.setLayoutDirection(QtCore.Qt.LeftToRight)

 

 

 

3. self.progressBar.setstyleSheet( ~ ) 은  designer - styleSheet 변경과 같은 방식으로 적습니다.

아래와같이 입력해주시면 두번째 이미지와 같이 progressbar가 적용됩니다. 

( QProgressBar::chunk{ ~ } 예전에 색상 및 디자인 변경에 실패했던 이유가 이 chunk부분인 것 같습니다. chunk 전에 :: (콜론)을 꼭 두 개 입력해주셔야 적용됩니다. )

 

self.progressBar.setStyleSheet("QProgressBar{\n"
"    background-color: rgb(98, 114, 164);\n"
"    color:rgb(200,200,200);\n"
"    border-style: none;\n"
"    border-bottom-right-radius: 10px;\n"
"    border-bottom-left-radius: 10px;\n"
"    border-top-right-radius: 10px;\n"
"    border-top-left-radius: 10px;\n"
"    text-align: center;\n"
"}\n"
"QProgressBar::chunk{\n"
"    border-bottom-right-radius: 10px;\n"
"    border-bottom-left-radius: 10px;\n"
"    border-top-right-radius: 10px;\n"
"    border-top-left-radius: 10px;\n"
"    background-color: qlineargradient(spread:pad, x1:0, y1:0.511364, x2:1, y2:0.523, stop:0 rgba(254, 121, 199, 255), stop:1 rgba(170, 85, 255, 255));\n"
"}\n"
"\n"
"")

 

chunk design 설정에서 background-color 설정을 그라데이션으로 넣어주어서 프로그레스바가 그라데이션되어있는 것을 볼 수 있습니다. 단색으로 넣어주려면 rgb(a,b,c)와 같이 넣어주시면 됩니다!