QML控件类型：Slider（竖直滑动条）

去往火星

已于 2024-08-21 08:59:33 修改

阅读量74

点赞数 3

分类专栏： QT 学习笔记文章标签：前端数据库

于 2024-08-20 17:51:40 首次发布

本文链接：https://blog.csdn.net/qq_35662333/article/details/141364631

版权

QT 学习笔记专栏收录该内容

105 篇文章 11 订阅

订阅专栏

网上都是水平滚动条，没找到竖直的，自己写个

版本一

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Slider {
        id: control
        anchors.centerIn: parent
        orientation: Qt.Vertical
        value: 0.5

        onValueChanged:{
//            console.log(value)
        }

        background: Rectangle {
            x: control.leftPadding + control.availableWidth / 2 - width / 2
            y: control.bottomPadding
            implicitWidth: 4
            implicitHeight: 200
            width: implicitWidth
            height: control.availableHeight
            radius: 2
            color: "#21be2b"
            Component.onCompleted: {
                console.log("===============1===================")
//                console.log(x, y)
                console.log(control.availableWidth, control.availableHeight, height)
//                console.log(control.leftPadding, control.topPadding, control.bottomPadding,)
            }

            //绿色滚动条
            Rectangle {
                width: parent.width
                height: control.visualPosition * parent.height
                color: "#bdbebf"
                radius: 2
                Component.onCompleted: {
                    console.log("===============2===================")
//                    console.log(control.visualPosition, parent.width, parent.height)
                }
            }
        }

        //圆形句柄
        handle: Rectangle {
            x: control.leftPadding + control.availableWidth / 2 - width / 2
            y: control.bottomPadding + control.visualPosition * (control.availableHeight - height) //control.availableHeight是动态变化的
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: control.pressed ? "red"/*"#f0f0f0"*/ : "blue"/*"#f6f6f6"*/
            border.color: "#bdbebf"
            Component.onCompleted: {
                console.log("===============3===================")
                console.log("control.availableHeight, height: ", control.availableHeight, height)
            }
        }
    }
}

版本二

import QtQuick 2.15
import QtQuick.Controls 2.15
Slider {
    id: control
    orientation:Qt.Vertical

    property bool acceptWheel: true //滚轮滑动
    property color handleNormalColor: "white"  //按钮颜色
    property color handleHoverColor: Qt.lighter(handleNormalColor)
    property color handlePressColor: Qt.darker(handleNormalColor)
    property color completeColor: "#6495ED"
    property color incompleteColor: "#C1CDC1"


    implicitWidth: 24;
    implicitHeight: 150;
    //padding把长条背景挤压
    padding:  width/4;

    handle: Rectangle {
        x: control.leftPadding +  (control.availableWidth - width) / 2
        y: control.topPadding + (control.visualPosition * (control.availableHeight - height))
        width: control.width
        height: control.width
        radius: width/2
        color: control.pressed
               ?handlePressColor
               :control.hovered
                 ?handleHoverColor
                 :handleNormalColor
    }

    background: Rectangle {
        x: control.leftPadding + ((control.availableWidth - width) / 2)
        y: control.topPadding
        implicitWidth: control.horizontal ? 200 : 6
        implicitHeight: control.horizontal ? 6 : 200
        width:  implicitWidth
        height:  control.availableHeight
        radius: 3
        color: control.incompleteColor

        //用另一个方块分别已完成和未完成的颜色
        Rectangle {
            y:  control.visualPosition * parent.height
            width: parent.width
            height: control.position * parent.height
            radius: 3
            color: control.completeColor
        }
    }
}