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 | 87148 |
8 | ShaderEffect QML Type 을 이용한 그래픽효과 | makersweb | 2018.12.09 | 2228 |
7 | Qml에서 커튼효과 구현 예제 - Shader Effects | 운영자 | 2018.12.05 | 1194 |
6 | QML에서 동적으로 텍스트 다국어 처리 | makersweb | 2018.11.04 | 4332 |
5 | Qml에서 키보드 입력 이벤트 핸들링 | makersweb | 2018.08.09 | 3715 |
4 | Qml 및 C++개발시 유용한 팁 [3] | makersweb | 2018.04.06 | 6168 |
3 | QML에서 undefined를 확인하는 방법 | makersweb | 2017.11.29 | 1561 |
» | Qml 사용자 ScrollBar 구현 | makersweb | 2015.07.24 | 6291 |
1 | z-order 를 컨트롤 하기위한 방법 | makersweb | 2015.05.13 | 6685 |