Qt/QML学习-RangeSlider

QML学习

main.qml

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

    RangeSlider {
        id: rangeSlider
        from: 0
        to: 100
        first {
            value: 10
            handle: Rectangle {
                implicitWidth: 30
                implicitHeight: 30
                border.width: 1
                x: rangeSlider.leftPadding
                   + rangeSlider.first.visualPosition
                   * (rangeSlider.availableWidth - width)
                y: rangeSlider.height / 2 - height / 2
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 15
                    text: rangeSlider.first.value.toFixed(0)
                }
            }
        }
        second {
            value: 90
            handle: Rectangle {
                implicitWidth: 30
                implicitHeight: 30
                border.width: 1
                x: rangeSlider.leftPadding
                   + rangeSlider.second.visualPosition
                   * (rangeSlider.availableWidth - width)
                y: rangeSlider.height / 2 - height / 2
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 15
                    text: rangeSlider.second.value.toFixed(0)
                }
            }
        }
        background: Rectangle {
            implicitWidth: 200
            implicitHeight: 40
            border.width: 1
            Rectangle {
                width: parent.width - rangeSlider.leftPadding
                       - rangeSlider.rightPadding
                height: 10
                radius: 5
                anchors.centerIn: parent
                color: "black"
            }
            Rectangle {
                x: rangeSlider.first.visualPosition * parent.width
                   + rangeSlider.leftPadding
                width: rangeSlider.second.visualPosition * parent.width
                       - x - rangeSlider.rightPadding
                height: 10
                anchors.verticalCenter: parent.verticalCenter
                color: "red"
            }
        }
    }
}

演示

视频讲解

相关推荐
Larry_Yanan1 小时前
QML学习笔记(三十四)QML的GroupBox、RadioButton
c++·笔记·qt·学习·ui
im_AMBER1 小时前
杂记 14
前端·笔记·学习·web
立志成为大牛的小牛2 小时前
数据结构——十七、线索二叉树找前驱与后继(王道408)
数据结构·笔记·学习·程序人生·考研·算法
张永清-老清3 小时前
每周读书与学习->初识JMeter 元件(五)
学习·jmeter·性能调优·jmeter性能测试·性能分析·干货分享·每周读书与学习
低音钢琴3 小时前
【从零开始构建性能测试体系-02】 Apache JMeter 取样器指南:从入门到精通
学习·jmeter·apache
im_AMBER3 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
cimeo3 小时前
【C 学习】12.2-函数补充
学习·c#
ajassi20004 小时前
开源 C++ QT QML 开发(十七)进程--LocalSocket
c++·qt·开源
微露清风4 小时前
系统性学习C++-第五讲-内存管理
java·c++·学习
小张的博客之旅6 小时前
2025年“羊城杯”网络安全大赛 线上初赛 (WriteUp)
python·学习·网络安全