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

演示

视频讲解

相关推荐
小丑西瓜6664 分钟前
qt ui设计案例--登录界面
qt·ui·c/c++·qss
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
Natural_yz5 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王5 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity
Natural_yz5 小时前
大数据学习10之Hive高级
大数据·hive·学习
内蒙深海大鲨鱼5 小时前
qt之ui开发
数据库·qt·ui
love_and_hope5 小时前
Pytorch学习--神经网络--完整的模型训练套路
人工智能·pytorch·python·深度学习·神经网络·学习
夜雨星辰4876 小时前
Android Studio 学习——整体框架和概念
android·学习·android studio
奔跑的花短裤6 小时前
少儿编程启蒙学习
学习·青少年编程·机器人·ai编程
VertexGeek6 小时前
Rust学习(一):初识Rust和Rust环境配置
开发语言·学习·rust