带圆角的QT/QML材料进度条

我想拥有材质样式ProgressBar组件，但经过一些修改，使其高度可调。 到目前为止一切都很好，我得到了我想要的结果

所以我只是在MyPb.qml中复制了这段代码，将其用作组件：

import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4

T.ProgressBar {
    id: control
    property real radius: 3

    contentItem: ProgressBarImpl {
        implicitHeight: control.height

        scale: control.mirrored ? -1 : 1
        color: control.Material.accentColor
        progress: control.position
        indeterminate: control.visible && control.indeterminate
    }

    background: Rectangle {
        implicitWidth: control.width
        implicitHeight: control.height
        radius: control.radius

        color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
    }
}

为了举例，给出了这个结果：

使用代码：

Rectangle {
    width: 600
    height: 300
    color: "black"

    MyPb {
        anchors.centerIn: parent
        id: prg
        width: 100
        height: 20
        indeterminate: false
        radius: 5
        visible: true
        value: 0.5
    }
}

因为ProgressBarImpl实际上不支持半径，所以圆角“隐藏”在不透明的进度矩形下，如图（进度条左侧）所示

现在，我之所以不制作自己的进度条，是因为我还想要“不确定”的动画。所以我想这会很重要 重用Qt实现比开始自己创建更简单 动画

因此，我想知道是否有一种方法可以使用Material progress bar，但对其进行某种处理以获得圆角，同时使用Undeterminate=false/true

---

任何帮助都将不胜感激

您可以尝试在

contentItem

上使用

background

项作为掩码源来设置

OpacityMask

---

如果这不起作用，只需创建一个进度条就更容易了。这是一个非常简单的非交互式组件，毕竟有一个很小的使用界面。

请参阅Qt论坛中的以下帖子：

此处建议的进度条由以下部分组成：

一个圆形的矩形，用于进度条的“槽”

充当矩形剪辑路径的项目

该项目内的圆形矩形，用作彩色条

根据您的问题，我得到以下代码作为概念证明：

import QtQuick 2.9

Rectangle {
    property int percentage: 40
    id: root
    width: 400
    height: 100
    radius: height / 2
    color: "#333"

    Item {
        id: cliprect
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width * parent.percentage / 100
        clip: true

        Rectangle {
            width: root.width                        
            height: root.height 
            radius: height / 2
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            color: "#e33"
        }
    }
}

---

将其移动到模板中/使其与材料属性兼容应该很容易。

您使用的是什么版本的Qt？我有很多。有时特定的版本非常重要，有时不重要，但我宁愿从正确的版本开始以防万一。：）@AshleyTharp我正在使用Qt5.11，但坦率地说，任何更新的版本都适合我（例如，如果它与5.12一起工作，我很乐意切换）尝试将

ProgressBar

的

padding

属性设置为非零，并将其半径设置为3。上周我实现了你想要的一个，但现在我没有。遗憾的是，我尝试了OpacityMask，而进度矩形（例如，当值=0.3时，位于宽度30%的矩形）没有显示，动画也没有显示。我不知道为什么。