한국어
Qt
 

QML and Qt Quick Qml 사용자 ScrollBar 구현

makersweb 2015.07.24 20:31 조회 수 : 10094

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 117122
40 Android 애플리케이션 서명 구성 file makersweb 2023.12.17 4559
39 Qt 스마트 포인터 (QSharedPointer, QScopedPointer, QPointer) makersweb 2022.08.18 4555
38 ShaderEffect QML Type을 이용한 버튼 클릭 효과 file makersweb 2020.05.22 4526
37 Qt 6의 C++ 프로퍼티 바인딩 예제 makersweb 2021.11.01 4497
36 Qt Bluetooth 관련 기능 확인 사항 makersweb 2018.07.10 4470
35 안드로이드 가상장치 사용 file makersweb 2019.01.13 4460
34 tslib의 ts_calibrate를 응용해서 Qt로 터치보정기능 구현 file makersweb 2019.04.06 4389
33 하드디스크 드라이브 여유 공간 계산 file makersweb 2023.01.15 4367
32 Qbs 프로젝트를 정의하기 위해 사용되는 몇가지 중요한 아이템들 file makersweb 2019.10.13 4329
31 ApplicationWindow 와 메뉴바(MenuBar)구성 file makersweb 2020.01.04 4319
30 Qt 6에서 QList 변경사항 makersweb 2020.10.08 4294
29 QRhi 에 대해서 file makersweb 2023.12.29 4279
28 QML과 코루틴(Coroutines) makersweb 2020.11.03 4278
27 Qt 5 코드를 Qt 6로 포팅하기 위해 도움이 되는 Clazy Framework file makersweb 2021.03.01 4272
26 Embedded Linux 에서 Qt 및 Graphics Stack file 운영자 2020.05.27 4248
25 QScopedPointer 소개 및 사용법 makersweb 2019.11.29 4205
24 단일 인스턴스 Qt 응용 프로그램(Single-instance Application) makersweb 2022.06.23 4150
23 Qt MQTT 에 대해서 file makersweb 2020.06.02 4132
22 QML 바인딩 끊김 진단 makersweb 2020.11.08 4099
21 QMake 프로젝트를 CMake 프로젝트로 변환 with qmake2cmake makersweb 2022.09.17 4086