한국어
Qt
 

QML and Qt Quick Qml 사용자 ScrollBar 구현

makersweb 2015.07.24 20:31 조회 수 : 4991

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;
    }
}

 

이 글과 연관된 다른 글
  1. [2019/04/26] QML과 QtQuick 모듈 개념과 기본 타입들 by makersweb (6391)
  2. [2019/01/05] Qml 기본 컴포넌트 강좌 (2) by makersweb (3332)
  3. [2019/01/03] Qml 기본 컴포넌트 강좌 (1) by makersweb (4401)
  4. [2018/12/25] Qml과 C++로 구현하는 GUI어플리케이션 by makersweb (4973)
  5. [2018/04/06] Qml 및 C++개발시 유용한 팁 by makersweb (2514) *2
번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 11881
117 Qt의 시그널 슬롯 시스템 file makersweb 2015.10.20 10181
116 QString 문자열 다루기 예제 운영자 2019.01.26 9566
115 Qt 프로그래밍의 시작 makersweb 2015.10.25 8538
114 Ubuntu Linux에서 Qt Creator 설치 file makersweb 2016.03.06 7738
113 Windows에서 라즈베리파이3용 Qt5.10.0 크로스컴파일 [12] file makersweb 2018.02.23 7404
112 QtConcurrent를 이용하여 쓰레드를 만드는 방법과 MapReduce file makersweb 2016.01.24 6487
111 QML과 QtQuick 모듈 개념과 기본 타입들 makersweb 2019.04.26 6391
110 Qt의 스레드간 시그널 슬롯의 커넥션타입 makersweb 2015.10.24 5471
109 초보자를 위한 첫번째 프로젝트 - QML로 만드는 Hello World file makersweb 2018.03.16 5411
108 z-order 를 컨트롤 하기위한 방법 makersweb 2015.05.13 5292
» Qml 사용자 ScrollBar 구현 file makersweb 2015.07.24 4991
106 Windows에서 Qt 설치 따라하기 file makersweb 2019.10.14 4987
105 Qml과 C++로 구현하는 GUI어플리케이션 file makersweb 2018.12.25 4973
104 Qt Image Provider를 이용한 Qml애플리케이션으로 이미지 제공 makersweb 2015.10.18 4610
103 Qml 기본 컴포넌트 강좌 (1) file makersweb 2019.01.03 4401
102 안드로이드 Qt 프로그래밍 file makersweb 2018.11.30 4220
101 Qt 응용프로그램 배포(windows) file makersweb 2018.10.10 3991
100 Qt Installer Framework - 패키징, 설치프로그램 제작 file makersweb 2018.10.14 3673
99 QtCreator Design으로 GUI만들기 (QML로 만드는 Hello World -2) file makersweb 2019.05.26 3649