自定义qml滑动条Slider

来源：互联网发布：房贷利率上调知乎编辑：程序博客网时间：2024/05/17 01:20

自定义qml滑动条Slider

作者 qq 843230304
效果图：红色箭头所指的部分（如图所示，控制页面的滑动）
这里写图片描述

控制Flickable及其子类的页面滑动显示，比如ListView\GridView

用法

ListView{//GridViewid:myList……}        MediaFileSlider{            id: wifiSlider            visible: true            anchors.right: parent.right            list: myList//指定某个list            width:25            height:540        }

源码

import QtQuick 2.0Item{    id: root    property variant list:undefined    Rectangle {        id: sliderbar        width: parent.width        height: parent.height        color: "#19ffffff"        radius: 1        anchors.right: parent.right        MouseArea{            id:mouseScrollbar            anchors.fill: parent            onClicked: {                var pt = mouseY < button.height ? 0 : (mouseY < sliderbar.height - button.height ? mouseY : sliderbar.height - button.height)                list.contentY = pt / (sliderbar.height - button.height) * (list.contentHeight - list.visibleArea.heightRatio * list.contentHeight)            }        }        // 按钮        Rectangle {            id: button            x: 0            y: list.contentY /(list.contentHeight - (list.visibleArea.heightRatio * list.contentHeight)) * (sliderbar.height - button.height)            width: parent.width            height: list.visibleArea.heightRatio * sliderbar.height < (list.visibleArea.heightRatio * list.contentHeight)/5 ? (list.visibleArea.heightRatio * list.contentHeight)/5 : list.visibleArea.heightRatio * sliderbar.height;            color: "#4cffffff"            radius: 1            // 鼠标区域            MouseArea {                id: mouseArea                anchors.fill: button                drag.target: button                drag.axis: Drag.YAxis                drag.minimumY: 0                drag.maximumY: sliderbar.height - button.height                // 拖动                onMouseYChanged: {                    var pt = button.y                    list.contentY = pt / (sliderbar.height - button.height) * (list.contentHeight - list.visibleArea.heightRatio * list.contentHeight)                }            }        }    }}

阅读全文

0 0