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"
            }
        }
    }
}

演示

视频讲解

相关推荐
Test.X42 分钟前
学习16天:pytest学习
学习·pytest
XISHI_TIANLAN1 小时前
【多模态学习】Q&A6: 什么是MOE架构?Router Z Loss函数是指什么?负载均衡损失(Load Balancing Loss)又是什么?
学习·算法·语言模型
Diligence8151 小时前
计算机网络学习总结(二)应用层
学习·计算机网络
小墨宝2 小时前
web前端学习LangGraph
前端·学习
尘似鹤2 小时前
微信小程序学习(五)
学习·微信小程序·小程序
计算机毕业设计小帅2 小时前
【2026计算机毕业设计】基于微信小程序的英语在线学习系统
学习·微信小程序·毕业设计·课程设计
千忧散3 小时前
Unity Socket学习笔记 (三)TCP&UDP
笔记·学习·unity·c#
今天只学一颗糖3 小时前
Linux学习笔记--触摸屏驱动
笔记·学习
半路程序员4 小时前
Go语言学习(四)
开发语言·学习·golang
老歌老听老掉牙4 小时前
基于 PyQt5 实现刀具类型选择界面的设计与交互逻辑
python·qt·交互