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 | 86596 |
8 | z-order 를 컨트롤 하기위한 방법 | makersweb | 2015.05.13 | 6606 |
7 | QML내에서의 시그널, 슬롯 시스템 | makersweb | 2019.09.29 | 7055 |
6 | Qml 기본 컴포넌트 강좌 (2) [2] | makersweb | 2019.01.05 | 8696 |
5 | QML 강좌 - 동적 Listing (ListView) | makersweb | 2019.06.01 | 10205 |
4 | Qml 기본 컴포넌트 강좌 (1) | makersweb | 2019.01.03 | 12189 |
3 | QML과 QtQuick 모듈 개념과 기본 타입들 | makersweb | 2019.04.26 | 13475 |
2 | Qml과 C++로 구현하는 GUI어플리케이션 | makersweb | 2018.12.25 | 14120 |
1 | QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) [1] | makersweb | 2019.05.26 | 15094 |