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

演示

视频讲解

相关推荐
wanzhong23331 小时前
ArcGIS学习-20 实战-地形研究
学习
wanzhong23331 小时前
ArcGIS学习-20 实战-县域水文分析
学习·arcgis
小马学嵌入式~1 小时前
嵌入式 SQLite 数据库开发笔记
linux·c语言·数据库·笔记·sql·学习·sqlite
索迪迈科技1 小时前
java后端工程师进修ing(研一版 || day40)
java·开发语言·学习·算法
武文斌772 小时前
arm启动代码总结
arm开发·嵌入式硬件·学习
我怕是好3 小时前
学习stm32 蓝牙
stm32·嵌入式硬件·学习
索迪迈科技3 小时前
STM32F103C8T6开发板入门学习——点亮LED灯2
stm32·嵌入式硬件·学习
Learn Beyond Limits4 小时前
The learning process of Decision Tree Model|决策树模型学习过程
人工智能·深度学习·神经网络·学习·决策树·机器学习·ai
凯尔萨厮5 小时前
Java学习笔记三(封装)
java·笔记·学习
牵牛老人5 小时前
Qt C++ 复杂界面处理:巧用覆盖层突破复杂界面处理难题之一
数据库·c++·qt