专栏首页跟Qt君学编程Flat风格的Qml范围滑块

Flat风格的Qml范围滑块

基于Qml的RangeSlider控件修改而成。

范围滑块代码

import QtQuick 2.5
import QtQuick.Controls 2.0

RangeSlider {
    id: root

    property color checkedColor: "#3498DB"

    first.value: 0.25
    second.value: 0.75

    background: Rectangle {
        x: root.leftPadding
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: 200
        implicitHeight: 12
        width: root.availableWidth
        height: implicitHeight
        radius: height / 2
        color: "#EBEDEF"

        Rectangle {
            x: root.first.visualPosition * parent.width
            width: root.second.visualPosition * parent.width - x
            height: parent.height
            color: root.checkedColor
            radius: height / 2
        }
    }

    first.handle: Rectangle {
        x: root.leftPadding + first.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: root.background.implicitHeight + 6
        implicitHeight: implicitWidth
        radius: implicitWidth / 2
        color: first.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        border.color: Qt.darker(root.checkedColor, 0.93)
    }

    second.handle: Rectangle {
        x: root.leftPadding + second.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: root.background.implicitHeight + 6
        implicitHeight: implicitWidth
        radius: implicitWidth / 2
        color: second.pressed ? Qt.darker(root.checkedColor, 1.2) : root.checkedColor
        border.color: Qt.darker(root.checkedColor, 0.93)
    }
}

范围滑块样式代码

GridLayout {
    width: root.width
    rows: 3
    columns: 3

    Repeater {
        model: ["#727CF5", "#0ACF97", "#F9375E",
                "#FFBC00", "#2B99B9", "#5A6268",
                "#EEF2F7", "#212730", "#3498DB"]

        RangeSlider {
            checkedColor: modelData
        }
    }
}

本文分享自微信公众号 - Qt君(qtjuna)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flat风格的Qml滑动条

    Qt君
  • Flat风格的Qml组合框

    Qt君
  • Flat风格的Qml滚动选择条

    Qt君
  • Flat风格的Qml滑动条

    Qt君
  • Flat风格的Qml组合框

    Qt君
  • linux基础命令4

    创建文件夹 # mkdir note # ll -d note/ drwxr-xr-x. 2 root root 4096 Feb 22 15:53 note...

    零月
  • 如何使用CP / SCP / RSYNC在Linux中排除特定目录?

    对于任何系统管理员或一般Linux操作系统用户而言,在服务器之间执行文件复制操作都是一项常见任务。在将文件从一个系统复制到另一个系统时,由于某些特定原因,我们可...

    用户6543014
  • Docker数据管理与挂载管理

    数据卷 是一个可供一个或多个容器使用的特殊目录,它绕过 UFS,可以提供很多有用的特性:

    踏歌行
  • Python 之调用系统命令

    在python2.7以上的版本,subprocess模块提供了一个可以直接获得输出的函数

    py3study
  • centos7系统常用命令

    https://blog.csdn.net/weixin_39951988/article/details/87613816#2.5%C2%A0which%E5...

    GH

扫码关注云+社区

领取腾讯云代金券