한국어
Qt
 

QML and Qt Quick Qml 사용자 ScrollBar 구현

makersweb 2015.07.24 20:31 조회 수 : 5332

K-20150724-735169.png

 

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 28407
21 Windows에서 라즈베리파이3용 Qt5.10.0 크로스컴파일 [18] file makersweb 2018.02.23 9293
20 Windows환경에서 mingw로 Qt 5.10 정적(static)빌드 file makersweb 2018.02.01 4308
19 다국어 지원 어플리케이션 개발 file makersweb 2018.01.27 1965
18 Qt 어플리에이션 전역에 폰트 설정 makersweb 2018.01.24 3454
17 Qt 3D Studio 시작하기 file makersweb 2018.01.11 2620
16 QPA 플러그인과 HTML5 Backend file makersweb 2017.12.27 646
15 임의의 메모리 영역(QImage)에 QPainter를 이용하여 그리기 file makersweb 2017.12.19 1971
14 QML에서 undefined를 확인하는 방법 makersweb 2017.11.29 892
13 QPA 플러그인과 EGLFS file makersweb 2017.11.21 2529
12 타임스탬프( timestamp) 유닉스 시간 makersweb 2017.10.19 979
11 Qt Logging Rule, Qt 프레임워크 로그 출력 makersweb 2017.01.13 2676
10 QString 문자열에서 숫자만 추출해서 QString으로 반환 makersweb 2017.01.10 2402
9 멀티 스레드환경, 스레드에 안전한 이벤트처리 makersweb 2016.10.27 3664
8 Ubuntu Linux에서 Qt Creator 설치 file makersweb 2016.03.06 9023
7 QtConcurrent를 이용하여 쓰레드를 만드는 방법과 MapReduce file makersweb 2016.01.24 7393
6 Qt 프로그래밍의 시작 makersweb 2015.10.25 10918
5 Qt의 스레드간 시그널 슬롯의 커넥션타입 [1] makersweb 2015.10.24 6886
4 Qt의 시그널 슬롯 시스템 file makersweb 2015.10.20 16223
3 Qt Image Provider를 이용한 Qml애플리케이션으로 이미지 제공 makersweb 2015.10.18 5037
» Qml 사용자 ScrollBar 구현 file makersweb 2015.07.24 5332