[PyQt] Scroll Area 공부하기

출처: https://youtu.be/ttBjf4bMDXY

 

 

이 영상을 보고 따라한 내용이다. 

 

---

Scroll Area를 가져온다. 

ScrollArea 외부에서 우클릭-배치-수직으로 배치 클릭

그렇게 하면 화면 창 크기에 따라 scroll area가 움직이는 모습을 볼 수 있다.

 

편의를 위해 메인윈도우 배경색(background-color)을 바꿔준다.

Scroll Area에 Frame 하나를 가져와준 후 우클릭하여 배경색(스타일시트 - background color)를 변경해준다.

 

스크롤영역 내부에서 우클릭 - 배치 - 수평으로 배치를 누르면

 

프레임이 스크롤영역만큼 늘어나는 것을 볼 수 있다.

 

프레임의 미니멈사이즈를 우측 속성 편집기에서 창 사이즈보다 크게 늘린다.

그럼 스크롤바가 생긴다.

 

 

스크롤바 색 바꾸기

프레임의 배경색을 지우고 다시 돌아와서

스크롤영역의 스크롤바를 바꿔보자.

스크롤영역 우클릭 - 스타일시트 바꾸기 클릭

 

 

/*수직 스크롤바 스타일시트 변경*/
QScrollBar:vertical{
	border:none;
	background-color:rgb(59, 59, 90);
	width:14px;
	margin: 15px 0px 15px 0px;
	border-radius:0px
}

배경색은 원하는 색으로 변경하면 된다.

 

 

margin 첫번째 숫자: 위 쪽 스크롤바와 화살표 사이 간격

margin 두번째 /네번째 숫자: 스크롤바 오른쪽, 왼쪽 여백

margin 세번째 숫자: 아래 쪽 스크롤바와 화살표 사이 간격

 

 

스크롤 막대 스타일시트 바꾸기

막대 색 변경이 가능하다. 

/*핸들러 바 버티컬*/
QScrollBar::handle:vertical{
	background-color: rgb(85, 85, 255);
	min-height:30px;
	border-radius:5px;
}

background-color: 색상

min-height: 막대 최소길이

border-radius: 테두리 (조금 둥글게 된 것을 볼 수 있음)

 

 

또한 커스터마이징이 가능하다.

QScrollBar::handle:vertical:hover{
	background-color: rgb(255, 38, 96);
}
QScrollBar::handle:vertical:pressed{
	background-color: rgb(255, 85, 127);
}

hover은 막대에 커서를 올렸을 때 색상이 변한다.

pressed는 막대를 눌렀을 때 색상이 변한다.

 

 

 

수직 화살표 색상 커스터마이징 하기

스크롤 버튼 위 아래 색상 바꾸기, 커서 올렸을 때 와 눌렀을 때 색상 변경

/*BTN TOP - SCROLLBAR*/
QScrollBar::sub-line:vertical{
	border:none;
	background-color:rgb(59, 59, 90); 
	height: 15px;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	subcontrol-position:top;
	subcontrol-origin:margin;
}

QScrollBar::sub-line:vertical:hover{
	background-color: rgb(255, 38, 96);
}
QScrollBar::sub-line:vertical:pressed{
	background-color: rgb(255, 85, 127);
}

/*BTN DOWN - SCROLLBAR*/
QScrollBar::add-line:vertical{
	border:none;
	background-color:rgb(59, 59, 90); 
	height: 15px;
	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
	subcontrol-position:bottom;
	subcontrol-origin:margin;
}

QScrollBar::add-line:vertical:hover{
	background-color: rgb(255, 38, 96);
}
QScrollBar::add-line:vertical:pressed{
	background-color: rgb(255, 85, 127);
}

 

 

스크롤 바 배경색 바꿔주는 방법

/*RESET ARROW 스크롤바 배경색 바꿔주기*/
QScrollBar::up-arrow::vertical, QScrollBar::down-arrow:vertical{
	background:none;
}
QScrollBar::add-page::vertical, QScrollBar::sub-page:vertical{ 
	background:none;
}

 

 

전체 코드

QScrollBar:vertical {
	border: none;
    background: rgb(45, 45, 68);
    width: 14px;
    margin: 15px 0 15px 0;
	border-radius: 0px;
 }

/*  HANDLE BAR VERTICAL */
QScrollBar::handle:vertical {	
	background-color: rgb(80, 80, 122);
	min-height: 30px;
	border-radius: 7px;
}
QScrollBar::handle:vertical:hover{	
	background-color: rgb(255, 0, 127);
}
QScrollBar::handle:vertical:pressed {	
	background-color: rgb(185, 0, 92);
}

/* BTN TOP - SCROLLBAR */
QScrollBar::sub-line:vertical {
	border: none;
	background-color: rgb(59, 59, 90);
	height: 15px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	subcontrol-position: top;
	subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:hover {	
	background-color: rgb(255, 0, 127);
}
QScrollBar::sub-line:vertical:pressed {	
	background-color: rgb(185, 0, 92);
}

/* BTN BOTTOM - SCROLLBAR */
QScrollBar::add-line:vertical {
	border: none;
	background-color: rgb(59, 59, 90);
	height: 15px;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	subcontrol-position: bottom;
	subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:hover {	
	background-color: rgb(255, 0, 127);
}
QScrollBar::add-line:vertical:pressed {	
	background-color: rgb(185, 0, 92);
}

/* RESET ARROW */
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
	background: none;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
	background: none;
}



/* HORIZONTAL SCROLLBAR - HOMEWORK */
QScrollBar:horizontal {
   
}
QScrollBar::handle:horizontal {
    
}
QScrollBar::add-line:horizontal {
    
}
QScrollBar::sub-line:horizontal {
    
}
QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
{

}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{

}