한국어
Qt
 

QML and Qt Quick Qml 사용자 ScrollBar 구현

makersweb 2015.07.24 20:31 조회 수 : 6210

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 85363
76 [Qt News] Qt for Python을 위한 기술 비전 j2doll 2019.08.20 1615
75 열거형(enum)을 QML에서 사용하는 방법과 문자열(QString)로 얻기 makersweb 2019.08.20 3834
74 [Qt News] Qt 6 기술 비전 (Technical vision for Qt 6) [2] j2doll 2019.08.08 2096
73 [Qt News] Qt6 Git 개발 초기 단계 시작하기 j2doll 2019.08.02 2315
72 [Qt] Google Play의 향후 요구 사항을 준수하는 방법 [2] j2doll 2019.07.29 968
71 Qt기반의 오픈소스 프로젝트들 - 2 운영자 2019.07.21 3991
70 QML, 이미지, 폰트등을 바이너리 리소스로 만들기 makersweb 2019.06.24 3460
69 Qt Creator에서 임베디드 장치로 deploy설정(Custom Process Step) file makersweb 2019.06.15 2178
68 Qt Quick Controls 2사용 및 스타일 설정 file makersweb 2019.06.07 6218
67 QML 강좌 - 동적 Listing (ListView) file makersweb 2019.06.01 10029
66 QtInstallerFramework로 온라인 설치프로그램(Online Installer)만드는 방법 [4] file makersweb 2019.05.28 6227
65 QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) [1] file makersweb 2019.05.26 14772
64 QML에서 멀티 스레드(multithreading) 프로그래밍 file makersweb 2019.05.25 2640
63 QtSerialPort를 사용한 시리얼(Serial)통신 [3] makersweb 2019.05.21 11759
62 Qt기반의 오픈소스 프로젝트들 makersweb 2019.05.15 5370
61 Q_D매크로와 d-pointer file makersweb 2019.05.07 745
60 가상키보드(Qt Virtual Keyboard)를 사용하는 방법 [32] file makersweb 2019.05.03 219978
59 Windows에서 Qt D-Bus를 사용하여 프로세스간 통신(IPC) file makersweb 2019.05.02 4435
58 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 13325
57 QML 전역 객체 (Global Object) file makersweb 2019.04.10 1039