Make ScrollBar without using predefined QML Component (ScrollBar).
23 views
Skip to first unread message
Shubham Gupta
Jan 9, 2019, 7:08:16 AM1/9/19
to go-qml
I am trying to make a ScrollBar without using predefined QML component. Most of i did, now i am facing problem to connect with ListView.
My Code is given below:
import QtQuick 2.0
Rectangle{
property bool is_parentDrag: false
property bool is_childDrag: false
id:parent_screen
anchors.fill:parent
color:"#ebeaee"
Rectangle{
id:foot
width:parent.width*0.9
height:parent.height*0.133
color:"#ffffff"
border.width:1
anchors.bottom:parent.bottom
anchors.bottomMargin:lv.height*0.005
anchors.horizontalCenter: parent.horizontalCenter
Rectangle{
width:parent.width*0.125
height:parent.height*0.5
radius:20
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: parent.height*0.2
color:"transparent"
Image{
source: "left_direction_icon.png"
anchors.centerIn: parent
sourceSize.width: parent.width*0.4
sourceSize.height: parent.width*0.4
}
MouseArea{
anchors.fill:parent
onClicked: {
stack.pop()
}
}
}
}
Flickable{
id:flick_1
width:parent.width*0.9
height:parent.height*0.7
anchors.centerIn: parent
boundsBehavior: Flickable.StopAtBounds
ListView{
id:lv
clip:true
boundsBehavior: Flickable.StopAtBounds
height:parent.height
width:parent.width*0.9
anchors.left:parent.left
anchors.leftMargin: parent.width*0.11
model:Data{}
delegate: Rectangle{
id:delg
width:lv.width*0.5
height:lv.height*0.170
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:left
width:1
height:parent.height
color:"black"
anchors.left:parent.left
}
}//Creating my own ScrollBar
Rectangle{
id:scrollbar
width:flick_1.width*0.02
height:flick_1.height
visible: lv.contentHeight>lv.height
radius:width/2
color:"lightgrey"
anchors.right: lv.right
anchors.rightMargin: lv.width*0.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
implicitHeight : lv.height/lv.model.count
radius:width/2
opacity:0.85
color: "grey"
// Here I am trying to connect my ScrollBar with ListView
onYChanged: {
lv.contentY=scroll.y
if(scroll.y==scrollbar.height-scroll.height)
lv.contentY = lv.contentHeight-lv.height
}
MouseArea{
id:drag_area
anchors.fill:parent
drag.target: scroll
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: scrollbar.height-scroll.height
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.YAxis
drag.minimumY: 0
drag.maximumY: scrollbar.height-scroll.height
onPressed:{
if(is_parentDrag)
is_parentDrag=false
else
is_parentDrag=true
}
onClicked: {
console.log("Minimum Value>>"+drag_area.drag.minimumY)
}
}
}
}
}
Component.onCompleted: {
console.log("Model Count value>>"+lv.model.count)
}
}
Please suggest what should be done in this case:
Thanks
Reply all
Reply to author
Forward
0 new messages