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

演示

视频讲解

相关推荐
皮蛋sol周18 分钟前
嵌入式学习C语言(八)二维数组及排序算法
c语言·学习·算法·排序算法
人生游戏牛马NPC1号1 小时前
学习 Flutter (一)
android·学习·flutter
Aczone282 小时前
嵌入式 数据结构学习 (六) 树、哈希表与内核链表
数据结构·学习·算法
想成为大佬的每一天2 小时前
Linux驱动学习day22(interrupt子系统)
学习
Chef_Chen2 小时前
从0开始学习R语言--Day43--Wald检验
学习
真的想上岸啊2 小时前
学习C++、QT---21(QT中QFile库的QFile读取文件、写入文件的讲解)
c++·qt·学习
之歆2 小时前
Python-正则表达式-信息提取-滑动窗口-数据分发-文件加载及分析器-浏览器分析-学习笔记
python·学习·正则表达式
rui锐rui3 小时前
大数据学习7:Azkaban调度器
学习
醇醛酸醚酮酯4 小时前
Qt项目锻炼——TODO(五)
开发语言·qt
北风toto5 小时前
python学习DataFrame数据结构
数据结构·python·学习