qml 自定义渐变色进度条样式

最新推荐文章于 2024-02-20 00:15:00 发布

6057

最新推荐文章于 2024-02-20 00:15:00 发布

阅读量673

点赞数

分类专栏： QT 文章标签： qml 进度条

本文链接：https://blog.csdn.net/qq_26611129/article/details/127268956

版权

QT 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

本博客仅用于记录qml中渐变间隔块状样式进度条的实现，creator本版:5.7.0
颜色渐变通过gradient实现，块状间隔样式通过OpacityMask实现。
如图：
在这里插入图片描述
动态进度展示：

qml实现代码：

import QtQuick 2.6
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Item{
    id:control
    property var value: 0.0//进度值 范围0.0~1.0
    property var bar_w:24//块状宽度
    property var _radius:2//块状圆角
    Item{
        id:id_item1
        anchors.fill: parent
        visible: false
        Rectangle{
            id:id_rect1
            anchors.centerIn: parent
            width: parent.height
            height: parent.width
            rotation: -90
            gradient: Gradient {
                GradientStop {
                    position: 0.0
                    color: "#35b992"
                }
                GradientStop {
                    position: 0.5
                    color: "#cdbf42"
                }
                GradientStop {
                    position: 1.0
                    color: "#f03737"
                }
            }
        }
        Rectangle{
            anchors{
                right: parent.right
                top: parent.top
                bottom: parent.bottom
            }
            width: parent.width * (1.0 - value)
            color:"#DFDFDF"
        }
    }

    Rectangle{
        id:id_mask
        anchors.fill: parent
        visible: false
        antialiasing: true
        smooth: true
        color: "transparent"
        Row {
            id:id_row
            anchors.fill: parent
            anchors.leftMargin: 10
            Repeater {
                model: id_row.width/bar_w
                delegate: Item {
                    width: bar_w
                    height: id_row.height+20
                    rotation: 15
                    Rectangle{
                        anchors.fill: parent
                        anchors.rightMargin: parent.width/2
                        radius: _radius
                    }
                    Item {
                        anchors.fill: parent
                        anchors.leftMargin: parent.width/2
                    }
                }
            }
        }
    }
    OpacityMask {
        id:mask_image
        anchors.left: id_item1.left
        anchors.verticalCenter: id_item1.verticalCenter
        width: id_mask.width
        height: id_item1.height
        source: id_item1
        maskSource: id_mask
        visible: true
        antialiasing: true
    }
}