Qml 사용자 ScrollBar 구현
Scroll_Bar.qml
import QtQuick 2.0
/**************************************************************
SCROLL BAR
**************************************************************/
Item {
id: scrollbar;
width: 14
height: 477
visible: (flickable.visibleArea.heightRatio < 1.0);
property Flickable flickable : null;
property int handleSize : 14;
/**************************************************************
BACKGROUND
**************************************************************/
Rectangle {
id: backScrollbar;
width: parent.width
height: parent.height
antialiasing: true;
color: "transparent"
anchors { fill: parent; }
Image{
id: scroll_bg_img
x: 0
y: 0
source: "qrc:/img/image/general/scroll_menu_list_bg.png"
}
MouseArea {
anchors.fill: parent
onClicked: { }
}
}
/**************************************************************
HANDLE
**************************************************************/
Item {
id: groove;
clip: true;
anchors {
fill: parent;
topMargin: 0;
leftMargin: 0;
rightMargin: 0;
bottomMargin: 0;
}
MouseArea {
id: clicker;
drag {
target: handle;
minimumY: 0;
maximumY: (groove.height - handle.height);
axis: Drag.YAxis;
}
anchors { fill: parent; }
onClicked: { flickable.contentY = (mouse.y / groove.height * (flickable.contentHeight - flickable.height)); }
}
Item {
id: handle;
height: Math.max (20, (flickable.visibleArea.heightRatio * groove.height)) + 16;
width: 14
anchors {
left: parent.left;
right: parent.right;
}
Rectangle {
id: backHandle;
height: parent.height
width: parent.width
color: "transparent"
anchors { fill: parent; }
Behavior on opacity { NumberAnimation { duration: 150; } }
Image{
id: hdl_top_img
x:0
width: 14
source: "qrc:/img/image/general/scroll_t.png"
}
Image{
id: hdl_middle_img
x: 0
y: 8
width: 14
height: parent.height - 16
//fillMode: Image.TileHorizontally
source: "qrc:/img/image/general/scroll_m.png"
}
Image{
id: hdl_bottom_img
x: 0
y: parent.height - 8
width: 14
source: "qrc:/img/image/general/scroll_b.png"
}
}
}
}
Binding {
target: handle;
property: "y";
value: (flickable.contentY * clicker.drag.maximumY / (flickable.contentHeight - flickable.height));
when: (!clicker.drag.active);
}
Binding {
target: flickable;
property: "contentY";
value: (handle.y * (flickable.contentHeight - flickable.height) / clicker.drag.maximumY);
when: (clicker.drag.active || clicker.pressed);
}
}
Scroll_Bar 아이템 사용
ListView {
id: list;
anchors.fill: parent;
model: 100;
delegate: Rectangle {
height: 95;
width: parent.width;
color: (model.index %2 === 0 ? "darkgray" : "lightgreen");
}
}
Rectangle{
x: 1257 - 276
y: 199 - 165
Scroll_Bar {
flickable: list;
}
}
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
공지 | Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 | 운영자 | 2019.01.05 | 78883 |
11 | Qt Logging Rule, Qt 프레임워크 로그 출력 | makersweb | 2017.01.13 | 3295 |
10 | QString 문자열에서 숫자만 추출해서 QString으로 반환 | makersweb | 2017.01.10 | 2814 |
9 | 멀티 스레드환경, 스레드에 안전한 이벤트처리 | makersweb | 2016.10.27 | 4397 |
8 |
Ubuntu Linux에서 Qt Creator 설치
![]() | makersweb | 2016.03.06 | 10195 |
7 |
QtConcurrent를 이용하여 쓰레드를 만드는 방법과 MapReduce
![]() | makersweb | 2016.01.24 | 8622 |
6 | Qt 프로그래밍의 시작 | makersweb | 2015.10.25 | 13290 |
5 | Qt의 스레드간 시그널 슬롯의 커넥션타입 [1] | makersweb | 2015.10.24 | 9006 |
4 |
Qt의 시그널 슬롯 시스템
![]() | makersweb | 2015.10.20 | 21303 |
3 | QQuickImageProvider 를 이용한 Qml 에서 이미지 표시 | makersweb | 2015.10.18 | 5656 |
» |
Qml 사용자 ScrollBar 구현
![]() | makersweb | 2015.07.24 | 5954 |
1 | z-order 를 컨트롤 하기위한 방법 | makersweb | 2015.05.13 | 6370 |