한국어
Qt
 

QML and Qt Quick Qml 사용자 ScrollBar 구현

makersweb 2015.07.24 20:31 조회 수 : 5329

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 28176
140 QString 문자열 다루기 예제 운영자 2019.01.26 18757
139 Qt의 시그널 슬롯 시스템 file makersweb 2015.10.20 16084
138 Windows에서 Qt 설치 따라하기 file makersweb 2019.10.14 14260
137 Qt 프로그래밍의 시작 makersweb 2015.10.25 10895
136 Windows에서 라즈베리파이3용 Qt5.10.0 크로스컴파일 [18] file makersweb 2018.02.23 9265
135 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 9109
134 초보자를 위한 첫번째 프로젝트 - QML로 만드는 Hello World file makersweb 2018.03.16 9033
133 Ubuntu Linux에서 Qt Creator 설치 file makersweb 2016.03.06 9003
132 QThread 소개 및 예제 makersweb 2019.12.25 8611
131 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 8554
130 QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) [1] file makersweb 2019.05.26 7926
129 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 7431
128 QtConcurrent를 이용하여 쓰레드를 만드는 방법과 MapReduce file makersweb 2016.01.24 7371
127 Qt의 스레드간 시그널 슬롯의 커넥션타입 [1] makersweb 2015.10.24 6868
126 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 6539
125 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 6382
124 QML 강좌 - 동적 Listing (ListView) file makersweb 2019.06.01 6189
123 z-order 를 컨트롤 하기위한 방법 makersweb 2015.05.13 5883
122 QtSerialPort를 사용한 시리얼(Serial)통신 [3] makersweb 2019.05.21 5847