한국어
Qt

QML and Qt Quick Qml 사용자 ScrollBar 구현

makersweb 2015.07.24 20:31 조회 수 : 4358

 

K-20150724-735169.png

 

 

Qml 사용자 ScrollBar 구현

 

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


    }



 

 

구현 확인

 

         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;



 


            }


        }