Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Flickable View



  • @dheerendra

    Hi,
    I am trying to make a scroll bar without using ScrollBar Component. So, I have made the scroll bar using rectangle but i am not able to flick the view using that scroll bar.
    My code is mentioned below:
    import QtQuick 2.0
    Rectangle{
    property bool is_parentDrag: false
    property bool is_childDrag: false
    id:parent_screen
    anchors.fill:parent
    color:"#ebeaee"
    Flickable{
    id:flick_1
    Rectangle{
    anchors.fill:parent
    color:"red"
    opacity:0.5
    }
    width:parent_screen.width0.9
    height:parent_screen.height
    0.7
    anchors.centerIn: parent
    flickableDirection:Flickable.HorizontalFlick
    boundsBehavior: Flickable.StopAtBounds
    ListView{
    id:lv
    clip:true
    boundsBehavior: Flickable.StopAtBounds
    anchors.fill:parent
    anchors.top:flick_1.top
    anchors.topMargin: parent.width0.01
    orientation: ListView.Horizontal
    model:Data{}
    delegate: Rectangle{
    id:delg
    width:parent_screen.width
    0.203 //260
    height:parent_screen.height0.170 //100
    Text{
    text:txt
    anchors.centerIn: parent
    font.pixelSize: 22
    }
    Rectangle{
    id:right
    width:1
    height:parent.height
    color:"black"
    anchors.right:parent.right
    }
    Rectangle{
    id:bottom
    width:parent.width
    height:1
    color:"black"
    anchors.bottom:parent.bottom
    }
    Rectangle{
    id:top
    width:parent.width
    height:1
    color:"black"
    anchors.top:parent.top
    }
    }
    Rectangle{
    id:scrollbar
    width:parent.width
    height:parent.height
    0.04
    visible: lv.contentWidth>lv.width
    radius:width/2
    color:"lightgrey"
    anchors.bottom: parent.bottom
    anchors.bottomMargin: parent.height0.1
    Rectangle {
    id:scroll
    Drag.active:is_parentDrag?parent_drag_area.drag.active:is_childDrag?drag_area.drag.active:false
    Drag.source: scroll
    implicitWidth: parent.width
    0.7
    implicitHeight: parent.height
    radius:width/2
    opacity:0.85
    color: "grey"

                    MouseArea{
                        id:drag_area
                        anchors.fill:parent
                        drag.target: scroll
                        drag.axis: Drag.XAxis
                        drag.minimumX: 0
                        drag.maximumX: scrollbar.width-scroll.width
                        onPressed:{
                            if(is_childDrag)
                                is_childDrag=false
                            else
                                is_childDrag=true
                        }
    
                    }
                }
                MouseArea{
                    id:parent_drag_area
                    anchors.fill:parent
                    drag.target: scroll
                    drag.axis: Drag.XAxis
                    drag.minimumX: 0
                    drag.maximumX: scrollbar.width-scroll.width
                    onPressed:{
    
                        if(is_parentDrag)
                            is_parentDrag=false
                        else
                            is_parentDrag=true
                    }
    
                }
    
    
            }
        }
    
    
    }
    

    }

    Please suggest!!


Log in to reply