qml自定义滑块

士木

已于 2024-08-21 19:58:55 修改

阅读量172

点赞数 2

文章标签：数据库

于 2024-08-16 11:42:57 首次发布

本文链接：https://blog.csdn.net/qq_45790908/article/details/141255637

版权

供参考

样式如图

            // 播放速度
            Text {
                text: qsTr("播放速度")
            }

            property real sliderwidth: 300.0

            Slider {
                id: customSlider
                width: 300
                height: 30
                Layout.alignment: Qt.AlignVCenter
                from: 0
                to: 8 // 因为有9个刻度，从0开始
                stepSize: 1
                value: 0

                background: Rectangle {
                    implicitWidth: 300
                    implicitHeight: 30
                    color: "transparent"
                    radius: 15

                    Canvas {
                        implicitWidth: 300
                        implicitHeight: 30
                        // anchors.fill: parent
                        onPaint: {
                            var ctx = getContext("2d");
                            ctx.reset();
                            ctx.lineWidth = 2;
                            ctx.strokeStyle = "#E0E1E4";

                            var tickWidth = 280 / 8;
                            for (var i = 0; i <= 8; i++) {
                                if (i === 0 || i === 3 || i === 6 || i === 8) { // 特别标记的刻度
                                    var label = "";
                                    switch (i) {
                                    case 3: label = "1x"; break;
                                    case 6: label = "10x"; break;
                                    case 8: label = "40x"; break;
                                    case 0: label = "  0.1x"; break;
                                    }
                                    var textX = i * tickWidth - 5; // 调整文本位置
                                    if (label) {
                                        ctx.save();
                                        ctx.font = "12px Arial";
                                        ctx.fillStyle = "#000000";
                                        ctx.fillText(label, textX, 25);
                                        ctx.restore();
                                    }
                                }
                                ctx.beginPath();
                                ctx.moveTo(i * tickWidth, 2);
                                ctx.lineTo(i * tickWidth, 14);
                                ctx.stroke();
                            }

                            ctx.beginPath();
                            ctx.moveTo(0, 8);
                            ctx.lineTo(280 , 8);
                            ctx.stroke();
                        }
                    }
                }

                handle: Rectangle {
                    // anchors.verticalCenter: parent.verticalCenter
                    width: 6
                    height: 12
                    color: "#2F2F2F"
                    radius: 3
                    x: (300 - 20 - width) * (customSlider.value / customSlider.to)
                }
            }

            Rectangle {

                radius: 8
                color: "#F3F4F6"
                Layout.preferredHeight: 28
                Layout.preferredWidth: 40

                Text {
                    anchors.centerIn: parent

                    text: {

                        var value = customSlider.value;
                        switch(value) {
                        case 8: clPreviewView.speedScale = 40; return  "40x "
                        case 7: clPreviewView.speedScale = 20; return  "20x "
                        case 6: clPreviewView.speedScale = 10; return  "10x "
                        case 5: clPreviewView.speedScale = 5; return   "5x   "
                        case 4: clPreviewView.speedScale = 2; return   "2x   "
                        case 3: clPreviewView.speedScale = 1; return   "1x   "
                        case 2: clPreviewView.speedScale = 0.5; return "0.5x"
                        case 1: clPreviewView.speedScale = 0.2; return "0.2x"
                        case 0: clPreviewView.speedScale = 0.1; return "0.1x"
                        }
                    }

                }
            }